3.3 可视化盒子模型
盒子模型是关于CSS控制页面的一个重要概念。只有很好地掌握了盒子模型及其中每个元素的用法，才能真正地控制页面中各个元素的位置。
3.3.1 盒子模型
页面中所有的元素都可以看作一个盒子，都占据着一定的页面空间。一般来说，这些被占据的空间往往都比单纯的内容要大。换句话说，可以通过整个盒子的边框和距离等参数，来调节盒子的位置。
盒子模型是由content（内容）、border（边框）、padding（填充）和margin（边界）4部分组成的，如图3-12所示。
图3-12 盒子模型图解
边界、填充和边框都分为“上、右、下、左”4个方向，既可以分别定义，也可以统一定义，代码如下：
CSS内定义的宽（width）、高（height），指的是填充的内容范围，因此一个元素实际宽度=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。代码如下：
则实际宽度如图3-13所示。
图3-13 元素的实际宽度计算
提示
关于盒子模型还有以下几点需要注意：
（1）边框默认的样式（border-style）可设置为不显示（none）。
（2）填充值不可为负。
（3）内联元素，如a，定义上、下边界不会影响到行高。
（4）如果盒子中没有内容，则即使定义了宽度和高度都为100%，实际上还是为0，因此不会被显示，此处在采取Div+CSS布局的时候需要特别注意。
3.3.2 视觉可视化模型
p、h1、div等元素被称为块级元素，因为这些元素显示为一块内容，即“块级框”。与之相反，strong和span等元素被称为行内元素，因为它们的内容显示在行中，即“行内框”。
可以使用display属性改变生成的框的类型，将display属性设置为block，可以让行内元素表现得像块级元素一样；将display属性设置为none，可以让生成的元素没有框，此时，这个框及其所有内容就不显示，不占用文档中的空间。
CSS中有3种基本的定位机制：普通文档流定位、浮动定位和绝对定位。除非专门指定，否则所有框都在普通文档流中定位。
块级框从上到下一个接一个排列；框之间的垂直距离可以根据框的垂直空白边宽度计算出来。
行内框在一行中的水平位置，可以使用水平方向的填充、边框和空白边设置它们之间的水平间距。但是，垂直方向的填充、边框和空白边不影响行内框的高度。由一行形成的水平框称为行框，行框的高度总是足以容纳它包含的所有行内框，可以通过设置行高增加这个框的高度。
框可以按照HTML的嵌套方式包含其他的框。大多数框由显示定义的元素形成。但是，在一些情况下，即使没有进行显示定义，也会创建块级元素。这种情况发生在将一些文本添加到一些块级元素（如div）的开头时。即使没有把这些文本定义为段落，它也会被当作段落对待：
在这种情况下，这个框被称为无名块级框，因为它不与专门定义的元素相关联。
块级元素内的文本行也会发生类似的情况。假设有一个包含三行文本的段落，每行文本形成一个无名行框，则无法直接对无名框或行框应用样式，因为没有可以应用样式的地方。但是，这有助于用户理解在屏幕上看到的所有东西都形成某种框。
3.3.3 空白边叠加
空白边叠加是一个比较简单的概念，当两个垂直空白边相遇时，它们将形成一个空白边。这个空白边的高度是两个发生叠加的空白边中高度较大者的高度。
当一个元素出现在另一个元素上面时，第一个元素的底空白边与第二个元素的顶空白边发生叠加，两个元素的CSS代码如下：
两个元素的空白边叠加效果如图3-14所示。
图3-14 两个元素的空白边叠加效果
当一个元素包含在另一元素中时（假设没有填充或边框将空白边隔开），它们的顶空白边和底空白边也会发生叠加。
提示
只有普通文档流中块级框的垂直空白边才会发生空白边叠加。行内框、浮动框和绝对定位框之间的空白边是不会叠加的。