SK04 布局和定位.docxVIP

HTML5笔记宋桥白PAGE \* Arabic \* MERGEFORMAT23PAGE \* Arabic \* MERGEFORMAT23SK04 布局和定位学习要点盒子模型标准文档流网页布局浮动清除浮动溢出处理定位在网页中的应用position属性z-index属性盒子模型CSS 盒子模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。也称为框模型。盒子模型的平面结构图 网页元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。盒子模型的三维立体层次结构图在网页中看到的网页内容，都是盒子模型的三维立体结构多层叠加的最终效果。从这里可以看出，如果对某个页面元素同时设置背景图像和背景颜色，则背景图像将在背景颜色的上方显示（实际设计时候可以考虑背景色和背景图片颜色相近，避免背景图片丢失导致体验感下降）。盒子模型属性介绍边框边框共有三个属性：color，width，styleborder-color属性说明示例border-top-color 边框颜色border-top-color:#369; border-right-color边框颜色border-right-color:#369; border-bottom-color边框颜色