2.7 CSS布局
在上一节介绍了CSS的一些基础样式，比如背景色和字体颜色，本节将介绍CSS的一个重要用途：页面布局。布局（Layout）是指对事物的全面规划和安排，而页面布局就是对HTML文档中的文字、图像或表格进行格式化版式排列，要掌握CSS布局方法首先要理解CSS框模型、元素的定位及浮动方式。
2.7.1 CSS框模型
CSS框模型（Box Model，有时也被称为盒子模型），它影响一个元素在页面布局中的定位，框模型描述了一个元素框如何处理元素内容、内边距、边框和外边距的方式，一个标准的CSS框模型如图2-7所示。
图2-7 CSS框模型
图中显示的是一个元素框，在HTML文档中，元素是以元素框的形式参与布局的，元素框内部虚线包裹的区域是元素的内容区域，中间的灰色实线是边框（border），边框到元素之间的区域是内边距（padding），最外部虚线到边框的区域是外边距（margin）。
内边距、边框和外边距可由用户自行设定，可以针对上、下、左、右统一或单独设置，默认值是零。
一个元素的大小，可细分为元素内容区域大小、元素显示区域大小及元素框区域大小。为元素设定width和height时，受影响的是元素内容区域；为元素设置背景色时，受影响的是元素显示区域。而一个元素在页面布局中的实际大小是元素框区域大小，它们之间的关系如下。
元素显示区域=元素内容区域+内边距+边框
元素框区域=元素显示区域+外边距
下面以一个示例来进行分析。
【例2-8】 CSS框模型示例。
上述HTML文档中包含一个div元素，通过嵌入式样式表，设定其宽度为140px，边框宽度为5px，内边距为40px，外边距为20px，在浏览器中显示如图2-8所示。
图2-8 div元素
1.border属性
CSS的border属性可为元素的边框设置样式、宽度和颜色。
（1）边框样式（border-style）
样式是边框最重要的一个属性，必须先为边框设定样式，才能显示边框并指定其他属性。为div元素指定边框样式的方法如下。
上述样式规则为div指定了一个实线边框。border-style取值如表2-5所示。
表2-5 border-style属性值说明
（2）边框宽度（border-width）
可以通过border-width属性为边框指定宽度，其样式声明如下。
border-width属性可以是具体的长度值，比如2px或0.1em；或者是thin、medium（默认值）和thick关键词。
（3）边框颜色（border-color）
可以通过border-color属性为边框指定颜色，其样式声明如下。
可以利用border-top-color、border-right-color、border-bottom-color、border-left-color属性为边框的四边指定不同的颜色。
2.padding属性
CSS的padding属性定义元素内边距的宽度，内边距是边框与元素内容之间的空白区域。padding属性可以使用长度值或百分比值，但不允许使用负值。
为div元素各边设置15像素的内边距的样式声明如下。
也可以为四边设置不同宽度的内边距，其样式声明如下。
设置的顺序为上、右、下、左，各边均可以使用不同的单位或百分比值。还可以只设置单个内边距，其样式声明如下。
3.margin属性
CSS的margin属性定义元素外边距的宽度，外边距是围绕在元素边框四周的空白区域。margin属性可以使用任何长度单位、百分数值甚至负值。
为div元素各边设置15像素的外边距的样式声明如下。
也可以为四边设置不同宽度的外边距，方法和padding设置一致。
2.7.2 定位机制（Position）
CSS有四种基本的定位机制，分别为标准文档流、相对定位、绝对定位和浮动定位，有时也把相对定位作为标准文档流的一部分，因为元素框的位置是相对于它在标准文档流中的位置确定的。
默认情况下，所有元素框按照标准文档流定位。块级元素框从上到下、一个接一个地排列，元素之间的垂直距离是由元素的垂直外边距决定的。
行内元素框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。
标准文档流不能满足布局要求时，可以利用绝对定位和浮动定位。
1.CSS标准文档流
CSS标准文档流指的是在不使用其他的与布局相关的CSS规则时各种元素的布局规则，是CSS中默认的元素布局方式。在该布局方式下一个HTML中的元素会自动地从左往右、从上往下地进行流式排列。
需要注意的是，由于HTML中元素被分为了块级元素及行内元素，这两类元素的标准文档流布局有所区别，下面举几个例子来说明。
（1）块级元素的标准文档流布局
【例2-9】 块级元素的标准文档流布局示例。
上述HTML文档在浏览器中显示如图2-9所示。可见，块级元素将独占页面的一行，多个块级元素从上至下依次排列。
（2）行内元素的标准文档流布局
【例2-10】 行内元素的标准文档流布局示例。
上述HTML文档在浏览器中显示如图2-10所示。可见，多个行内元素可以从左至右依次排列在页面同一行，当一行排列不下时，自动排列到下一行。
图2-9 块级元素的标准文档流布局
图2-10 行内元素的标准文档流布局
（3）块级元素和行内元素混合排列
【例2-11】 块级元素和行内元素混合排列示例。
在上述HTML文档中定义了6个元素，在浏览器中显示如图2-11所示。
图2-11 块级元素和行内元素混合排列
分析一下这样排列的原因：按照默认的文档流规则，先排元素1，占第一行最左位置，由于元素1是块级元素，因此独占1行。然后排元素2，元素2应该排在元素1后面，因为元素1占了一行，因此元素2排在了第二行的最左。这时排列元素3，元素3应该排在元素2后面，因为元素2和3都是行内元素，因此可以排在一排。这时排列元素4，元素4应该排在元素3的右边，由于4是块级元素需要独立占据一排，于是元素4排在了第三行。同理，元素5排在了第四行；元素6应该排在元素5后面，由于5独占了一行，因此元素6占据了下一行的最左。
2.相对（Relative）定位
对一个元素进行相对定位时，元素首先按照标准文档流进行定位，然后通过设置一个垂直或水平位置，让这个元素“相对于”它的原始位置进行移动。属性包括：left、right、top及buttom，说明如表2-6所示。
表2-6 相对定位属性说明
比如，设置如下样式规则。
该样式规则将元素框2，从原来的位置向右移动35像素，向下移动30像素，如图2-12所示。
图2-12 相对定位
需要注意的是，在相对定位中，位移的参考点是该元素框在标准文档流中的位置，并且虽然该元素框移动了，但其原始位置将继续保留，因此元素框3还是保持其在标准文档流中的位置，并没有因为元素框2移走了而向左边移动。
3.绝对（Absolute）定位
在绝对定位中，位移的参考点是最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块，根据浏览器的不同，最初的包含块可能是画布或HTML元素。移动后，元素框在标准文档流中的位置不再保留。绝对定位相关的属性包括：left、right、top及buttom，和相对定位一致，不再复述。下面举例说明其与相对定位的不同点。
该样式规则将元素框2从最近的已定位祖先元素位置向右移动35像素，向下移动30像素，如图2-13所示。
和图2-12相比，可以看出两点不同。
1）在绝对定位中，新位置的参考点不再是该元素在标准文档流中的位置，而是已定位的祖先元素。
2）元素框2移动后，原始位置被元素框3占用。
图2-13 绝对定位
需要注意的是，所谓已定位的祖先元素指的是具有定位属性的最近父元素。
2.7.3 浮动属性（Float）
元素在标准文档流中，遵循从左至右、从上往下的排列顺序，而通过设置元素的浮动样式属性，可以使元素脱离标准文档流的管理，向左或向右浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止，下面举例说明。
【例2-12】 浮动属性示例。
上述HTML文档中一共有三个div元素，按照默认的标准文档流排列，显示效果如图2-14所示。
当为元素1添加一条样式声明“float:right;”时，它将脱离标准文档流并且向右移动直到它的右边缘碰到包含框的右边缘，由于元素1脱离了标准文档流，因此其原始位置不再保留，元素2、3依次上移。如图2-15所示。
图2-14 浮动属性示例-元素1浮动前
图2-15 浮动属性示例-元素1向右浮动
当为元素框1添加一条样式声明“float:left;”时，元素框1脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。由于元素框1不再处于文档流中，因此其原始位置不再保留，元素框2、3依次上移，框1覆盖了框2，如图2-16所示。
如果把设置三个元素都向左浮动，那么元素1向左浮动直到碰到包含框，元素2向左浮动直到碰到元素1，元素3向左浮动直到碰到元素2，如图2-17所示。
如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其他浮动块向下移动，直到有足够的空间，如图2-18所示。
如果浮动元素的高度不同，那么当它们向下移动时可能被其他浮动元素“卡住”，如图2-19所示。
图2-16 浮动属性示例-元素1向左浮动
图2-17 浮动属性示例-三个元素向左浮动
图2-18 浮动属性示例-元素3自动向下移动
图2-19 浮动属性示例-元素3被元素1“卡住”