第4章CSS盒子模型

1、 第第4 4章章 CSSCSS盒子模型盒子模型 本章简介：本章简介： 本章本章主要介绍盒子模型的基本概念，主要介绍盒子模型的基本概念，并讲解并讲解CSSCSS定位的基本方法定位的基本方法。所有。所有页面中的页面中的元素都可以看成是一个盒子，占据着一定的元素都可以看成是一个盒子，占据着一定的页面空间。一般来说，这些被占据的空间往页面空间。一般来说，这些被占据的空间往往都要比单纯的内容大。换句话说，可以通往都要比单纯的内容大。换句话说，可以通过调整盒子的边框和距离等参数，来调节盒过调整盒子的边框和距离等参数，来调节盒子的位置和大小。子的位置和大小。一个页面由很多这样的盒子组成，这一个页面由很多这样

2、的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型些盒子之间会互相影响，因此掌握盒子模型需要从两方面来理解。一是理解一个孤立的需要从两方面来理解。一是理解一个孤立的盒子的内部结构；二是理解多个盒子之间的盒子的内部结构；二是理解多个盒子之间的相互关系。相互关系。本章首先讲解独立的盒子相关的性质，本章首先讲解独立的盒子相关的性质，然后介绍在普通情况下盒子的排列关系。下然后介绍在普通情况下盒子的排列关系。下一章将更深入地讲解浮动与定位的相关内容。一章将更深入地讲解浮动与定位的相关内容。 “盒子盒子”与与“模型模型”的概念探究的概念探究4.1长度单位长度单位4.2边框边框4.3设置内边距设置内边距4

3、.4 设置外边距设置外边距4.5盒子之间的关系盒子之间的关系4.6盒子在标准流中的定位原则盒子在标准流中的定位原则4.7盒子模型概念的实例盒子模型概念的实例4.84.1 “盒子”与“模型”的概念探究在学习盒子模型之前，先举例说明相关概念。假设在墙上整齐地在学习盒子模型之前，先举例说明相关概念。假设在墙上整齐地排列着排列着4 4幅画，如图幅画，如图4.14.1所示。对于每幅画来说，都有一个所示。对于每幅画来说，都有一个“边框边框”，在英文中称为在英文中称为“border”border”；每个画框中，画和边框通常都会有一定的；每个画框中，画和边框通常都会有一定的距离，这个距离称为距离，这个距离称为

4、“内边距内边距”，在英文中称为，在英文中称为“padding”padding”；各幅画；各幅画之间通常也不会紧贴着，它们之间的距离称为之间通常也不会紧贴着，它们之间的距离称为“外边距外边距”，在英文中，在英文中称为称为“margin” margin” 。画框示意图4.1 “盒子”与“模型”的概念探究在学习盒子模型之前，先举例说明相关概念。假设在墙上整齐地在学习盒子模型之前，先举例说明相关概念。假设在墙上整齐地排列着排列着4 4幅画，如图幅画，如图4.14.1所示。对于每幅画来说，都有一个所示。对于每幅画来说，都有一个“边框边框”，在英文中称为在英文中称为“border”border”；每个画框

5、中，画和边框通常都会有一定的；每个画框中，画和边框通常都会有一定的距离，这个距离称为距离，这个距离称为“内边距内边距”，在英文中称为，在英文中称为“padding”padding”；各幅画；各幅画之间通常也不会紧贴着，它们之间的距离称为之间通常也不会紧贴着，它们之间的距离称为“外边距外边距”，在英文中，在英文中称为称为“margin” margin” 。盒子模型4.2长 度 单 位本节介绍本节介绍CSSCSS规范中关于长度的规定。在规范中关于长度的规定。在HTMLHTML中，无论中，无论是文字的大小，还是图片的长宽设置，通常都使用像素或百是文字的大小，还是图片的长宽设置，通常都使用像素或百分比

6、来进行设置。在分比来进行设置。在CSSCSS中可以用多种长度单位，主要分为中可以用多种长度单位，主要分为两种类型，一种是相对类型，另一种是绝对类型。两种类型，一种是相对类型，另一种是绝对类型。1相对类型相对类型2绝对类型绝对类型4.3边 框边框（边框（borderborder）一般用于分隔不同元素，其外围即为元）一般用于分隔不同元素，其外围即为元素的最外围，因此计算元素实际的宽和高时，就要将素的最外围，因此计算元素实际的宽和高时，就要将borderborder纳入。换句话说，纳入。换句话说，borderborder会占据空间，所以在计算精细的版会占据空间，所以在计算精细的版面时，一定要把面时，

7、一定要把borderborder的影响考虑进去。的影响考虑进去。border的属性主要有的属性主要有3个，分别是个，分别是color（颜色）、（颜色）、width（粗细）和（粗细）和style（样式）。在设置（样式）。在设置border时常常需要时常常需要将这将这3个属性很好地配合起来，才能达到良好的效果。在使个属性很好地配合起来，才能达到良好的效果。在使用用CSS设置边框的时候，可以分别使用设置边框的时候，可以分别使用border-color、border-width和和border-style设置它们。设置它们。border4.3.1设置边框样式边框各种样式的显示效果边框各种样式的显示效果

8、。border-style4.3.2属性值的简写形式CSSCSS中可以用简单的方式确定边框的属性值中可以用简单的方式确定边框的属性值。1对不同的边框设置不同的属性值对不同的边框设置不同的属性值2在一行中同时设置边框的宽度、颜色和样式在一行中同时设置边框的宽度、颜色和样式3对一条边框设置与其他边框不同的属性对一条边框设置与其他边框不同的属性4同时制定一条边框的一种属性同时制定一条边框的一种属性5实例实例4.3.3边框与背景在设置边框时，还有一点值得注意，在给元素设置在设置边框时，还有一点值得注意，在给元素设置background-colorbackground-color背景色时，背景色时，IE

9、IE作用的区域为作用的区域为content + content + paddingpadding，而，而FirefoxFirefox的作用区域则是的作用区域则是content + padding + content + padding + borderborder。这在。这在borderborder设置为粗虚线时表现得特别明显。设置为粗虚线时表现得特别明显。IE与Firefox对待背景色的不同处理4.4设置内边距内边距（内边距（paddingpadding），用于控制内容与边框之间的距离。），用于控制内容与边框之间的距离。在边框和内容之间的空白区域就是内边距。在边框和内容之间的空白区域就是内边

10、距。设置padding后的效果4.5设置外边距外边距（外边距（marginmargin）指的是元素与元素之间的距离。可以看到边框）指的是元素与元素之间的距离。可以看到边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器窗口的边框。这是因为器窗口的边框。这是因为bodybody本身也是一个盒子，在默认情况下，本身也是一个盒子，在默认情况下，bodybody会有一个若干像素的会有一个若干像素的marginmargin，具体数值因各个浏览器而不尽相同。，具体数值因各个浏览器而不尽相同。因此在因此在bodybody中的其他盒子就

11、不会紧贴着浏览器窗口的边框了。为了验中的其他盒子就不会紧贴着浏览器窗口的边框了。为了验证这一点，可以给证这一点，可以给bodybody这个盒子也加一个边框。这个盒子也加一个边框。margin的效果4.6盒子之间的关系一个盒子内部的关系不难理解，实际上网页往往是很复杂的，一一个盒子内部的关系不难理解，实际上网页往往是很复杂的，一个网页可能存在着大量的盒子，并且它们以各种关系相互影响着。个网页可能存在着大量的盒子，并且它们以各种关系相互影响着。要把一个盒子与外部的其他盒子之间的关系理解清楚，并不是简要把一个盒子与外部的其他盒子之间的关系理解清楚，并不是简单的事情。在很多单的事情。在很多CSSCSS

12、资料中大都通过简单的分类，就资料中大都通过简单的分类，就CSSCSS本身的介绍本身的介绍来说明这个问题，往往只是就事论事。如果不能从站得更高的角度来来说明这个问题，往往只是就事论事。如果不能从站得更高的角度来理解这个问题，那么想真正搞懂它很困难，因此这里从更深入的角度理解这个问题，那么想真正搞懂它很困难，因此这里从更深入的角度来介绍来介绍CSSCSS与与HTMLHTML的关系。的关系。4.6.1HTML与DOM这里首先介绍这里首先介绍DOMDOM的概念。的概念。DOMDOM是是Document Object ModelDocument Object Model的缩写，的缩写，即即“文档对象模型

13、文档对象模型”。一个网页的所有元素组织在一起，就构成了一。一个网页的所有元素组织在一起，就构成了一棵棵“DOMDOM树树”。1“树树”的概念的概念2DOM树树3DOM树与盒子模型的联系树与盒子模型的联系4.6.2标准文档流“标准文档流标准文档流”（Normal Document StreamNormal Document Stream），简称），简称“标准流标准流”，是指在不使用其他与排列和定位相关的特殊是指在不使用其他与排列和定位相关的特殊CSSCSS规则时，各种元素的规则时，各种元素的排列规则。排列规则。1块级元素（块级元素（block level）2行内元素（行内元素（inline）4.

14、6.3标记与标记（divisiondivision）简单而言是一个区块容器标记，即）简单而言是一个区块容器标记，即与与之间之间相当于一个容器，可以容纳段落、标题、表格、图片，乃至章节、摘要和备注等相当于一个容器，可以容纳段落、标题、表格、图片，乃至章节、摘要和备注等各种各种HTMLHTML元素。可以把元素。可以把与与中的内容视为一个独立的对象，用于中的内容视为一个独立的对象，用于CSSCSS的控制。声明时只需要对的控制。声明时只需要对进行相应的控制，其中的各标记元素都会随之改进行相应的控制，其中的各标记元素都会随之改变。变。标记与标记与标记一样，作为容器标记而被广泛应用在标记一样，作为容器标记

15、而被广泛应用在HTMLHTML语言中。语言中。在在与与中间同样可以容纳各种中间同样可以容纳各种HTMLHTML元素，从而形成独立的对象。如元素，从而形成独立的对象。如果把果把“”替换成替换成“”，样式表中把，样式表中把“divdiv”替换成替换成“spanspan”，执行，执行后就会发现效果完全一样。可以说后就会发现效果完全一样。可以说与与这两个标记起到的作用都是独这两个标记起到的作用都是独立出各个区块，在这个意义上说二者没有不同。立出各个区块，在这个意义上说二者没有不同。与与的区别在于，的区别在于，是一个块级元素，它包围的元素会自动是一个块级元素，它包围的元素会自动换行。而换行。而仅仅是一个

16、行内元素（仅仅是一个行内元素（inline elementsinline elements），在它的前后不会换），在它的前后不会换行。行。没有结构上的意义，纯粹是应用样式，当其他行内元素都不合适时，没有结构上的意义，纯粹是应用样式，当其他行内元素都不合适时，就可以使用就可以使用元素。元素。4.7盒子在标准流中的定位原则在了解了标准流的基本原理后，介绍如何具体制作一些案例，掌握在了解了标准流的基本原理后，介绍如何具体制作一些案例，掌握盒子在标准流中的定位原则。盒子在标准流中的定位原则。如果要精确地控制盒子的位置，就必须对如果要精确地控制盒子的位置，就必须对marginmargin有更深入的了解。

17、有更深入的了解。paddingpadding只存在于一个盒子内部，所以通常它不会涉及与其他盒子之间的只存在于一个盒子内部，所以通常它不会涉及与其他盒子之间的关系和相互影响的问题。关系和相互影响的问题。marginmargin则用于调整不同的盒子之间的位置关系，则用于调整不同的盒子之间的位置关系，因此必须要对因此必须要对marginmargin在不同情况下的性质有非常深入的了解。在不同情况下的性质有非常深入的了解。4.7.1行内元素之间的水平margin两个块并排的情况。两个块并排的情况。行内元素之间的margin4.7.2块级元素之间的竖直margin如果不是行内元素，而是竖直排列的块级元素，

18、如果不是行内元素，而是竖直排列的块级元素，marginmargin的取值情况的取值情况就会有所不同。两个块级元素之间的距离不是就会有所不同。两个块级元素之间的距离不是margin-bottommargin-bottom与与margin-margin-toptop的总和，而是两者中的较大者，如图的总和，而是两者中的较大者，如图4.204.20所示。这个现象称为所示。这个现象称为marginmargin的的“塌陷塌陷”（或称为（或称为“合并合并”）现象，意思是说较小的）现象，意思是说较小的marginmargin塌塌陷（合并）到了较大的陷（合并）到了较大的marginmargin中。中。块元素之间的margin4.7.3嵌套盒子之间的margin除了上面提到的行内元素间隔和块级元素间隔这两种关系外，还有除了上面提到的行内元素间隔和块级元素间隔这两种关系外，还