CSS布局盒模型详解与应用技巧.pptVIP

第8章CSS盒子模型10月10日星期日第1页第1页

学习目标掌握盒子模型的结构掌握边框的相关属性设置与简写属性定义掌握内外边距的定义，用开发者工具查看元素样式第2页/10/10星期日

8.1CSS盒子模型概念下图描绘了盒子模型的结构，能够看到一种HTML元素相应的盒子涉及元素的内容、内边距、边框线和外边距。第3页/10/10星期日

8.2边框border元素边框相关CSS属性涉及border-style、border-width和border-color。border-style属性定义元素边框的样式如实线、虚线、点线等，假如没有样式，元素将没有边框。第4页/10/10星期日

8.2边框border表描述了border-style可能的取值第5页/10/10星期日

8.2边框border下面的代码为p定义了实线，为div定义点线：因为边框线有四条，能够分别为不同的边框线设置不同的样式：第6页/10/10星期日

8.2边框border从最上的边框线开始，按照顺时针方向给四条边框线的样式赋值，因此段落的上边框线为点线；右边框线为实线；下边框线为双线；左边框线为虚线。假如有HTML代码：应用上面定义的样式后在浏览器中的效果如图所示：第7页/10/10星期日

8.2边框border课本例8-1演示利用单边边框样式属性设置新闻模块标题下的分界