第13章CSS盒子模型（樊成立修改）.ppt

1、 “ “盒子盒子”与与“模型模型”的概念探究的概念探究13.113.1边框边框13.213.2设置内边距设置内边距13.313.3设置外边距设置外边距13.413.4 盒子之间的关系盒子之间的关系13.513.5盒子在标准流中的定位原则盒子在标准流中的定位原则13.613.6盒子模型概念的案例盒子模型概念的案例13.713.7 盒子模型是盒子模型是CSS控制页面时一个很重要控制页面时一个很重要的概念。的概念。 只有很好地掌握了盒子模型以及其中每只有很好地掌握了盒子模型以及其中每个元素的用法，才能真正地控制好页面中的个元素的用法，才能真正地控制好页面中的各个元素。各个元素。 本章主要介绍盒子模型

2、的基本概念，并本章主要介绍盒子模型的基本概念，并讲解讲解CSS定位的基本方法。定位的基本方法。13.1 “13.1 “盒子盒子”与与“模型模型”的概念探的概念探究究图图13.1 画框示意图画框示意图 图图13.2 盒子模型盒子模型案例13-0，1,2,3,413.2 13.2 边边 框框图图13.3 border示意图示意图13.2.1 13.2.1 设置边框样式设置边框样式13.2.2 13.2.2 属性值的简写形式属性值的简写形式1 1对不同的边框设置不同的属性值对不同的边框设置不同的属性值在在13.2.1节的实例代码中，分别设置了节的实例代码中，分别设置了border-color、bor

3、der-width和和border-style这这3个属性，其效果是对上下左右个属性，其效果是对上下左右4个边个边框同时产生作用。框同时产生作用。 在实际使用在实际使用CSS时，除了采用这种方时，除了采用这种方式，还可以分别对式，还可以分别对4条边框设置不同的属性值。条边框设置不同的属性值。 方法是按照规定的顺序，给出方法是按照规定的顺序，给出2个、个、3个个或者或者4个属性值，它们的含义将有所区别，具个属性值，它们的含义将有所区别，具体如下。体如下。 （1）如果给出）如果给出2个属性值，那么前者表个属性值，那么前者表示上下边框的属性，后者表示左右边框的属示上下边框的属性，后者表示左右边框的属

4、性。性。Border-color:red blue;1122 （2）如果给出）如果给出3个属性值，那么前者表个属性值，那么前者表示上边框的属性，中间的数值表示左右边框示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性。的属性，后者表示下边框的属性。Border-color:red blue green;1223 （3）如果给出）如果给出4个属性值，那么依次表个属性值，那么依次表示上、右、下、左边框的属性，即顺时针排示上、右、下、左边框的属性，即顺时针排序。序。 Border-color:red blue green purple;12342 2在一行中同时设置边框的宽度、颜色和

5、样式在一行中同时设置边框的宽度、颜色和样式要把要把border-width、border-border-color和和border-style这这3个属性合在一起，个属性合在一起，还可以用还可以用border属性来简写。属性来简写。 例如：例如：border: 2px green dashed;这行样式表示将这行样式表示将4条边框都设置为条边框都设置为2像素像素的绿色虚线，这样就比分为的绿色虚线，这样就比分为3条样式来写方便条样式来写方便多了。多了。 3 3对一条边框设置与其他边框不同对一条边框设置与其他边框不同的属性的属性4 4同时制订一条边框的一种属性同时制订一条边框的一种属性13.3 1

6、3.3 设置内边距设置内边距13.4 13.4 设置外边距设置外边距 图图13.12 DOM树与页面布局的对应关系树与页面布局的对应关系 1 1块级元素块级元素2 2行内元素行内元素13.5.3 13.5.3 标记与标记与标记标记div与与span的区别的区别案例案例13-0513.6 13.6 盒子在标准流中的定位原则盒子在标准流中的定位原则13.6.1 13.6.1 行内元素之间的水平行内元素之间的水平MarginMargin案例案例13-0613-06横向横向marginmargin相加，纵向相加，纵向marginmargin坍塌坍塌 图图13.15 行内元素之间的行内元素之间的marg

7、in 13.6.2 13.6.2 块级元素之间的竖直块级元素之间的竖直marginmargin图图13.17 块元素之间的块元素之间的margin案例13-0713.6.3 13.6.3 嵌套盒子之间的嵌套盒子之间的marginmargin 图图13.19 父子块的父子块的margin案例13-08 图图13.21 IE与与Firefox浏览器对待父元素高度的不同处理浏览器对待父元素高度的不同处理案例19-0913.6.4 margin13.6.4 margin可以设置为负值可以设置为负值 图图13.23 父子块设置父子块设置margin为负数为负数案例13-1013.7 13.7 盒子模型概念的案例盒子模型概念的案例图图13.24 计算图中各个字母代表的宽度（高度）是多少像素计算图中各个字母代表的宽度（高度）是多少像素案例13-11