网页制作综合技术教程课件温谦赵伟胡静李占波第13章节CSS盒子模型.pptVIP

网页制作综合技术教程 第4部分 CSS页面布局设计 第13章 CSS盒子模型 盒子模型是CSS控制页面时一个很重要 的概念。 只有很好地掌握了盒子模型以及其中每 个元素的用法，才能真正地控制好页面中的 各个元素。 本章主要介绍盒子模型的基本概念，并 讲解CSS定位的基本方法。 13.1 “盒子”与“模型”的概念探究 13.2 边 框 13.2.1 设置边框样式 13.2.2 属性值的简写形式 1．对不同的边框设置不同的属性值 在13.2.1节的实例代码中，分别设置了 border-color、border-width和border- style这3个属性，其效果是对上下左右4个边 框同时产生作用。 在实际使用CSS时，除了采用这种方 式，还可以分别对4条边框设置不同的属性值。 方法是按照规定的顺序，给出2个、3个 或者4个属性值，它们的含义将有所区别，具 体如下。 （1）如果给出2个属性值，那么前者表 示上下边框的属性，后者表示左右边框的属 性。 （2）如果给出3个属性值，那么前者表 示上边框的属性，中间的数值表示左右边框 的属性，后者表示下边框的属性。 （3）如果给出4个属性值，那么依次表 示上、右、下、左边框的属性，即顺时针排 序。 2．在一行中同时设置边框的宽度、颜色和样式 要把border-width、border-border- color和border-style这3个属性合在一起， 还可以用border属性来简写。 例如： border: 2px green dashed 这行样式表示将4条边框都设置为2像素 的绿色虚线，这样就比分为3条样式来写方便 多了。 3．对一条边框设置与其他边框不同 的属性 4．同时制订一条边框的一种属性 13.3 设置内边距 13.4 设置外边距 13.5 盒子之间的关系 13.5.1 HTML与DOM 1．树 2．DOM树 13.5.2 标准文档流 这里又出现了一个新的概念——“标准 文档流”（Normal Document Stream）， 或简称“标准流”。 所谓标准流，就是指在不使用其他与排 列和定位相关的特殊CSS规则时，各种元素 的排列规则。 1．块级元素 2．行内元素 13.5.3 div标记与span标记 html head titlediv与span的区别/title /head body pdiv标记不同行：/p divimg src=cup.gif border=0/div divimg src=cup.gif border=0/div divimg src=cup.gif border=0/div pspan标记同一行：/p spanimg src=cup.gif border=0/span spanimg src=cup.gif border=0/span spanimg src=cup.gif border=0/span /body /html 13.6 盒子在标准流中的定位原则 13.6.1 行内元素之间的水平 margin 13.6.2 块级元素之间的竖直margin 13.6.3 嵌套盒子之间的margin 13.6.4 margin可以设置为负值 13.7 盒子模型概念的案例 图13.14 div与span标记的区别 图13.15 行内元素之间的margin 图13.17 块元素之间的margin 图13.19 父子块的margin 图13.21 IE与Firefox浏览器对待父元素高度的不同处理 * 尚辅网 / “盒子”与“模型”的概念探究 13.1 边框 13.2 设置内边距 13.3 设置外边距 13.4 盒子之间的关系 13.5 盒子在标准流中的定位原则 13.6 盒子模型概念的案例 13.7 图13.1 画框示意图 图13.2 盒子模型 图13.3 border示意图 图13.10 家谱示意图 图13.12 DOM树与页面布局的对应关系