11.5　盒模型

CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里。盒子由内容区域、内容区域周围的空间（内边距，padding）、内边距的外边缘（边框，border）和边框外面将元素与相邻元素隔开的不可见区域（外边距，margin）。这类似于挂在墙上的带框架的画，其中衬边是内边距，框架是边框，而该画框与相邻画框之间的距离则是外边距，参见图11.5.1。

可以使用CSS确定每个元素的盒子的外观和位置，并由此控制网页的布局，参见图11.5.2。

正如第1章中讨论的，每个元素的盒子可以是块级的（从新的一行开始，就像一个新的段落），也可以是行内的（不会产生新行）。这对网页初始布局的影响是：在默认情况下，元素按照它们在HTML中自上而下出现的次序显示（这被称作文档流，document flow），并在每个块级元素的开头和结尾处换行。

对元素的盒子进行定位有四种基本方法：可以让盒子处于文档流中（这是默认的方式，也称做静态方法，它也是用得最多的方法，参见图11.5.3和图11.5.4），可以让盒子脱离文档流，并指定该元素相对于其父元素（绝对方法，需慎用）或浏览器窗口（固定方法，实践中用得更少）的精确坐标，还可以相对于盒子在文档流中的默认位置对其进行移动（相对方法，使用频率介于静态方法和另两种方法之间）。此外，如果盒子相互重叠，还可以指定它们的叠放次序（z-index）。

图11.5.1　每个元素有盒子都有四个决定其大小的属性：内容区域、内边距、边框和外边距。可以单独控制每一个属性

同时，可以控制盒子的外观，包括background、padding、border、margin、width、height、alignment、color等。本章将讨论所有这些属性。

注意，有些布局属性（尤其是em值和百分数）是依赖于其父元素的。记住，父元素是直接包含当前元素的元素（参见1.3节中的“父元素和子元素”小节）。

提示　图11.5.1是根据Rich Hauck的盒模型图绘制的（该图也是根据CSS规范中的插图绘制的）：www.mandalatv.net/itp/drivebys/css/。

图11.5.2　图11.5.1的盒模型

图11.5.3　还记得本章开头未应用任何样式的示例页面吗？这是示例页面的文档流。尽管为文本添加了样式，但各元素的次序并未改变，参见图11.5.4

图11.5.4　这是目前为止页面的显示效果。由于仅对文本添加了样式，因此常规的文档流没有任何变化