序言

乍看之下, CSS 布局模式简单明了。盒子，边框和边距都是相当简单的对象， CSS 语法对它们的特性描述并不复杂。

然而, 浏览器渲染引擎遵循着 CSS 2.1 推荐中所规定的一大堆规则，此外还有一些自己的规则。因此，对设计师而言，在将某个高级技巧添加到自己的技术集之前，需要先了解大量细节问题。

在本文中，我们将对那些控制 HTML 元素的布局的 CSS 属性进行介绍，这些 CSS 属性包括 HTML 元素的边框，边距和许多其它属性。本文所涵盖的范围还包括上面提到的一些规则。高级的栏式布局以及栅网聚焦技术将在后面的文章中讨论，这些文章将更加详细地对布局，浮动，清除，以及定位进行探讨。

变化的组合：CSS 中的边距，边框和填充距

在默认情况下，许多 HTML 元素如 div 元素和标题会渲染到占据浏览器画布的全部宽度，并且会强制实行末端断行，因此成串的这种元素的渲染效果在文档画布上会处于从上到下的堆叠中。

但是，HTML 元素和其通常的浏览器样式并不能满足开发员想达成的所有用途。把 CSS 与 HTML 合在一起用来“弥合差距”，从而 class 和 id 给标签添加语义，而样式表规则可以精确地改变布局和页面内容外观——甚至可能通过抵消掉浏览器默认样式的大部分效果来实现这一点。

对空白的细致控制是设计者最重要的工具之一——笔者认为它是重中之重。然而，尽管对空白的控制度能给网站设计带来高产品价值，但在默认的浏览器样式表中却缺乏这种控制，这就意味着设计师会频繁用到本文所说的边距,边框,填充距, 和其它 CSS 布局属性。

边距，边框和填充距的分布如图1所示。

图1：一个元素盒中各组成成分的详细图示，标有相关CSS属性。

在对象周围添加空白：margin-top、margin-right、margin-bottom、margin-left 及边距属性

边距可单独指定，也可在一条缩写规则中加以指定。另外缩写规则还可以对某个对象周围的各个边框进行控制。合法的值通常是用 px 或 em 单位指定的（像素或字体高）。而在 print-specific 样式表单中会相反用 in、cm 或 pt 单位（英寸、厘米或点）。

在所有情况下 %（百分比）值都是合法的，但须谨慎使用；此类值是按照父元素宽度的比例来计算的，漫不经心的赋值会造成意外的后果。这一问题将会在下面对 CSS 盒模型的讨论中加以详述。

除图像外所有内联元素都没有边距，因而无需边距值。关于这些元素的列表，请参阅下面的表2.

自动边距

依据不同的情况，auto 的赋值会指示浏览器按照自己样式表中的值来渲染边距。但是，在将这样的边距应用到某个元素上，而该元素的宽度具有意义时，auto 边距会将所有可用空间渲染成空白。

看看下列规则：

.narrowWaisted { width: 16.667em; margin: 1em auto 1em auto;
}

…class narrowWaisted 的块元素会将自身对齐到可用画布的中心。

…或可将某个适当元素的右边距设成某个相对较小的值，而左边距设为 auto 值。

设置完成后，这样的元素就会接近于右对齐。

负边距

所有边距属性都可以设为 negative。进行这种设置之后，就能以任意程度“抵消”相邻的边距。如果将一个足够大的负边距应用到一个足够大的元素上，受其影响的相邻元素甚至可以被重叠。

例如，看看下面简单的 div 元素（取自示例文件 negativemargin1.html。）

<div id="header"><h1>Lovely header</h1></div>
<div id="content"><p>Overlapping text is entirely unreadable</p></div>

如果用下面的CSS来样式化

body {background-color:white font-family:Geneva, Arial, Helvetica, sans-serif;}
#header { background-color:yellow }
h1 { color:red; font-size:2em; }

就会产生如图 2 所示的效果：

图2：这个简单示例中的两个元素。看起来很普通。

有意思的是下面这部分。现在我们要通过下面的规则给位于下边的元素的顶部添加一个相当大的负边距：

#content {margin-top:-3em;}

这样我们就会看到该元素上移了，重叠在标题上，如图3所示（实际例子参见negativemargins2.html 示例文件）。

图 3：应用了负边距之后，下边的元素上移并重叠在标题上。

合并边距

两个相似并相邻的块元素都有正边距时，两个边距中只有较大那个才会得以应用。如，试试下面的规则：

p { margin: 1em auto 1.5em auto;
}

如果按照字面含义对含有这种样式规则的文件进行渲染，连续的两个段落之间的最终边距应该是 2.5em ，即段落 1(1.5em)的底部边距与段落 2(1em)的顶部边距之和。但是，由于合并边距的应用，它们之间的边距只有 1.5em。

在块元素中列表和标题是特例，它们的边距不会与其它块元素的边距相合并。

示例1

在文本样式化一文中，F. Scott Fitzgerald 作品的开头部分的排版是由CSS做成的。本文中的示例用的是同一篇文章，只是对这片文章做了些小改动（主要是在正文周围加上一个容器元素）。没有对其文本式样作改动，只是去掉了该示例中用到的一些布局样式。

首先，我们将边距加到所有需要边距的元素上。

链接:

• 只做了最低程度的样式化处理的示例文件
• 初始样式表
• body，标题，格言引用，文件容器和段落上的新边距
• 示例1的样式表

新规则:

body { margin: 0; } #main { margin: 0 auto 0 auto; } h1 { margin: 0 0 1em 0; } .pullQuote { margin: auto 0 1em 1em; } p { margin: 0; } .attribution { margin: 0 0 1.5em 0; }

给对象添加边框 ：边框属性

border 缩写属性有是有的, 但是只有在给一个元素四边都加上完整一致的边框时才能用到它。通过下列属性的任意有意义的组合,可以给一个元素的四个边框之一设置粗细（宽度）、样式和颜色：

• border-width
• border-style
• border-color
• border-top
• border-top-width
• border-top-style
• border-top-color
• border-right
• border-right-width
• border-right-style
• border-right-color
• border-bottom
• border-bottom-width
• border-bottom-style
• border-bottom-color
• border-left
• border-left-width
• border-left-style
• border-left-color

border-width 属性

这些属性的作用与人们所预期的一致：它们给一个或多个边框指定明确的粗细.

border-width 缩写属性可支持的属性值表示法与 margin 缩写属性的一样，只是不支持百分比值。你可以像下面这样写规则：

td {	border-width: 1px 0 0 1px;
}

border-style 属性

图 4：八个常见的边框样式的运行效果。

border-style 属性通常接受下列这些值：

dashed

虚线的长度，及它们之间的空白的大小视浏览器而定.

dotted

点（形状不定，长宽比为 1）与点之间的空白的大小视浏览器而定。

double

设置的宽度将分成三段，按照填充－不填充－填充的顺序渲染。

groove

会紧贴在边框内部渲染出 outset，并inset对齐。

inset

边框会带有阴影效果，看起来像是把应用了该样式的元素压进了画布。

none

相当于对 -width 属性赋零值。

outset

边框会带有阴影效果，看起来像是把应用了该样式的元素挤压出容器之中。

ridge

会紧贴在边框内部渲染出 inset，并与 outset 对齐。

solid

边框表现为一条没有断点也没有阴影的线。

应用border-style 缩写属性时，一次至多可写四个值，其形式与 margin 缩写形式一样。

边框的淡化（而不是省略边框）处理是由 -color 属性进行的。

border-color 属性

最后，我们可以对任何一个边框设置任意颜色，这种操作可以通过单独对上面所列出的属性进行设置来完成，也可以通过 border-color 缩写属性来完成。对于在缩写属性中给出的值少于四个时会产生的效果，详见 margin 缩写属性说明。

像 background-color 一样，border-color 可以取 transparent。这一点在对付要求组合一致但不要求边框使用一致的边缘情况时会很有用。

详述边框缩写属性和它的四个近亲

和各种 -width、-style 和 -color 属性不同，你可以用这五个属性来定义某个对象的四侧边框的三个特征，或每次定义任一边框的三个特征。合法的 border（等等）缩写值包含所有或任一应用于此边框的宽度，样式和颜色属性；唯一的限制是你必须要么一次只提交某个元素的一侧边框，要么四侧边框全部提交。

看看下列 border 规则:

#borderShorthandExample {	border: 2px outset rgb(160,0,0);	padding: .857em;	background-color: rgb(255,224,224);
}

应用了上面规则的元素会产生与此处相同的效果。

如果在 border 缩写规则中省略某个值时，渲染出来的元素就会表现出对应的默认效果；

• 边框宽度视浏览器而定。
• 边框样式将是 solid。
• 边框颜色将与该元素所应用的 color一致。

创建线条: 五个… 而不是一个边框缩写属性的基本原理

这里所说的“rules”是指划过某个布局的线条，而不是要遵从的指令。这样的线条可以增强一个元素与它旁边的空白的对比度，在许多情况下，它们有助于制作一个布局中的立体感效果。inset 和 outset 边框样式就是这种效果的例子。

对一个元素的四边都加上边框可以得到相同的效果，而这种在布局上划出精确界定的线条的技能可以使设计者对细节有相当大的控制权。

…为什么要这么多属性?它们只是边框而已，不是吗?

如果一个布局的创建要求设计师具备高超的技艺，这就需要对边缘情况进行处理；这个问题已在早先讨论边距时提出了。

因为网站设计方式的缘故，你会遇到许多这样的情况，同一 HTML 文档中的某个元素与其它元素结构属性相似，却要求有不同的外观。在这些情况下，对大多数元素编写写一种规则，而对每个边缘情况编写附加规则就会非常有用。这就是auto和inherit值存在的原因：将默认样式作为边缘情况处理。

对边框来说，边缘情况很可能要求对某个元素某侧的边框的某个属性进行改变¬——如果某个人明智地选择遵从 KISS 法则，最好坚持只改变需要变动的细枝末梢。

示例2

文件中的某些部分需要以规则和边框的形式进行修饰。

链接：

• 在 title 的尾部添加规则，并给格言引用添加边框
• 示例2的样式表

新规则：

h1 { border-bottom: 1px solid rgb(153,153,153); }
.pullQuote { border: 1px solid rgb(153,153,153); }

只有边距是不够的：填充距属性

你可能会遇到背景颜色处于次要地位或带有需要在内容和边距之间留出缝隙的强调色的元素。你也可能遇到需要在边框和靠近边框的文本之间留出空隙的情况。

在如此种种情况下，padding、padding-top、padding-right、padding-bottom 和 padding-left 属性就可以大显身手。这些属性用于在元素和其内容的边距或边框之间插入负间距。边距，边框和填充距之间关系的明确图解请参见上面的图1。

这些属性的运作方式与边距属性完全相同，除了以下例外：

• 对填充距属性来说，auto 值并不起作用。
• 负填充距值是不合法的。
• 填充距不会合并。
• 边距值不是用于内联元素的，而填充距值才是。

示例3

应当在之前已经添加了边框的元素上添加间隙。

链接：

• 在之前添加到标题和格言引用的边框和文本之间插入空隙
• 示例3的样式表

新规则:

body { padding: 0; } h1 { padding: .5em 0 .5em 0; } .pullQuote { padding: .5em; }

对元素的宽度和高度进行处理

通常大部分元素的尺寸可以被更改。这种性质已在前面讨论 auto 边距时说明过了。

用来控制元素尺寸的CSS属性包括 width、height、min-width、max-width、min-height 和 max-height。这些属性可通过 overflow 属性与元素内容的尺寸相分离（或连接）。

此外还有 clip 属性，用于将元素的一部分隐藏于其边距中。但由于并不常用，所以在本文中就不详述了。

宽度和高度基础

通常，人们可以预见 width 和 height 的效果。但是，使用时也有些地方需要注意。

• width 和 height 不能用于 inline 元素… 在特定情况下一些元素（如span、strong 和 em）会无视 width 和 height 的值。这些元素的清单将在后面对元素类型进行探讨时列出。
• …尽管图像是内联元素,但它们是可以指定 width 和 height的。 CSS 2.1 推荐将图像看做“被替代”元素，这意味着浏览器会把它们当作含有静态尺寸对待。因此，这些尺寸 可以被任意更改。
• 只有 width 和 height 属性可以影响一个元素的功能性尺寸。 因此，常有这种情况出现：一个元素太小（常常是太窄）而不能像预期的那样装下它的内容，从而引起冒出。下面论及的 CSS 盒模型将会牵扯到这一问题。
• 微软 Internet Explorer（IE）的渲染漏洞，使得明确指定一些元素的 width 或 height 属性/值组成为必要。 IE 的渲染引擎的一些缺陷只能以强力解决掉（参见词汇表）。人们已了解了很大一部分缺陷，并准备要在 IE 8 中把它们消除掉，但在 IE 8 在 IE 安装基础中取代其前辈之前，这个问题将是无法回避的测试用例。PositionIsEverything.net 和 CSS-Discuss Wiki 提供了大量有关于这个问题和其解决技巧的信息。
• 有时取整算法会导致浏览器间不合规格的布局差异，这些浏览器是通过 LCD、LED 或 CRT（type="screen"）显示媒体来展示内容的。 screen 媒体类型最终会要求所有单位换算为像素度量单位，而浏览器间的像素度量单位会各不相同。

min-width、max-width、min-height、和max-height

有时，你会遇到这种情况：你需要对一个元素的大小进行约束——通常是为了保证一个大小为比例值的列能够保持在一个易于阅读的宽度上。各种 min- 和 max- 属性正是作用于此。与 width 和 height 情况一样，通常这些属性的使用效果是可以预见的。

但是以笔者的经验来看，这些属性的用途有限（尽管替他一些作者持异议）。像以前简单的 width 和 height 一样，它们也受到取整误差的困扰，这种误差很能会导致完全意外的后果。 更重要的是，IE 6 完全不支持它们。到2008年七月为止，IE 6 在市场上仍占有很大份额。

示例4

auto 边距是放在页面容器的左侧和右侧的。现在为了使这些边距值有意义，我们来为其设置 width。此外，还要给格言引用设置一个 float 值，使它也获得宽度。

链接：

• 改变文档容器和格言引用的宽度
• 示例4的样式表

新规则：

#main { width: 42em; }
.pullQuote { width: 14em; }

溢出：是对内容进行限制，还是给它自由

设定元素的 width 或 height 时，有时会需要考虑在该元素的内容占据的空间超过了严格意义上可获得的空间时，我们期望得到什么样的效果。在那些既有用户生成内容，又有严格布局规范的网站上尤其需要注意这一点。

overflow 属性和它的四个有效值——visible、hidden、auto 和 scroll ——可用于处理这种情况。图 5 展示了将这几个属性值应用到一个内容超出其边界框的元素上所产生的效果。

图 5: CSS overflow 属性的效果。

四种溢出属性值的效果

visible （默认）

在不影响相邻元素的 flow 或边距的同时，显示超出元素可用空间的内容。因此，某个元素的内容将与其相邻元素的内容相冲突。在后面的教程中，会对避免这种情况的技巧，以及在 IE 中因渲染问题而产生的特殊情况进行讨论。

hidden

超出该元素的界限的所有内容将被隐藏而不可见。

auto

跟用 hidden 值时一样，元素的尺寸会受到限制，但是会创建一个滚动条，使访问者可以获得溢出的内容。

scroll

即使在不必要的情况下，也会在元素上添加垂直和水平滚动条。

CSS 盒模型：将一切组合起来

既然我们已经讲完了基本的布局属性，接下来我们就来看看浏览器是如何按照一个元素的 CSS 属性来渲染它的宽度的——以及避免你的元素从布局中溢出。有些效果非常好，而另一些似乎毫无道理可言。麻烦的是有两种布局算法需要考虑：在 CSS 2.1 推荐中，由万维网联盟（W3C）所指定的模型，和较早版本的 IE 中所用的模型。

为你的布局选择适当的单位

对于文本来说，元素的大小可以用比例单位 % 或 em，或者像 px 这样的静态单位来设置。需要考虑的还有浏览器画布的大小永远是静态值，如果不用客户端 script 代码，是不可能恢复这个尺寸或调整窗口大小的——这种情况对于可访问性，可用性和媒体便携性的要求来说很不合适。

元素大小调整的重要规则：混用比例单位和静态单位时应慎重，或者干脆不要混用

默认的 width 和 height 值是 auto，这在标准英语中意即“使用所有可用空间”的指令 。对块元素来说其效果是，计算出的 width 占完了所有可用空间。对 height 来说，默认情况下元素会扩展来容纳它们的所有内容。

改变 width 和 height 值时，必须小心确保元素的内容（带有边距，边框和填充距）与你所指定的宽度相适应。为了实现这一点，最简单的办法就是进行下列步骤：

1. 在普通的显示器和/或字号条件下，考虑布局可用的最大宽度。到本文撰写时为止,这个数值一般是大约 800 或 1024 像素。你的网站受众越广，越应选这些值中较小的值。
2. 为你的整个文档创建一个容器元素，该元素的宽度在第一步所得宽度之内。
3. 为第二步所创建的容器元素中的元素设置布局属性时，采用与该容器元素相同的单位类型。

为布局选择适当的单位类型：优缺点

单位	优点	缺点
em	最适合于创建精确的二维布局栅格 用在与文档容器有关的方面时，会使布局跟据正文大小而扩展或收缩 可以使元素大小的计算值变得很容易估计	分数单元可能会由于浏览器之间的细微差异而扩张或缩小 为了达到最佳效果，文档中所有 font-size 和 line-height 值都应当设为明确而可预计的值
百分比	最适用于完全弹性布局 对于创建等宽栏之类的对象来说这是最简单的办法	为了避免内容冒出，可能会需要创建额外的容器元素 可能会导致元素过宽或过窄 其效果高度依赖于环境（参见下面的盒模型部分）
px	可以提供最高的布局控制权 可以消除大多数因浏览器差异而造成的变化	最不能满足可访问性和跨媒体支持要求s 最容易受到内容冒出的影响

表格 1: 设置布局属性时，百分比，em 和像素单位的优缺点

盒模型组件

盒模型实际上只是一系列指令，用来定义元素的种种布局规范如何相互作用。盒模型涵盖的组件有：

1. 文档画布
2. 边距
3. 边框
4. 填充距
5. 元素的宽度和高度
6. 子元素属性

上面的最后一项依次包含了其它5项。但是为简明起见，这一部分将集中讨论简单的父元素－子元素关系，多级盒模型交互作用将保留到后面详谈页面布局的文章中再做深入讨论。

W3C 的盒模型：一切都是附加的

基本规则就是一个元素的宽度或高度计算值等于：

margin + border + padding + (width|height)

在许多情况下，width 和/或 height 都设置的是其默认的 auto 值，这就是说为页面内容预备的画布区域等于：

available_canvas ? margin ? padding ? border

在这样的等式中，available_canvas 本身是一个离散值（如果是自动计算的话）, 用它来减去边距，边框和填充距。 这个数字对元素的宽度极为重要，设计者的计算错误将会导致在浏览器窗口上出现水平滚动条这种让人头疼的结果。另外，浏览器通常会将元素置于浏览器画布的左边，但它可能会溢出浏览器窗口的右边，除非有其它命令来限定。

看看下面的样式表规则:

#myLayoutColumn { width: 50em; margin: 1.5em auto 1.5em auto; border: .1em; padding: .9em;
}

如前面在讨论边距属性时说过的那样，#myLayoutColumn 会将自身对齐到其容器元素的中心，无论其容器是 body，还是由开发团队做出的其它东西。

另外，如果“严格模式”的激活（通过一个适当的 !DOCTYPE 声明）应用了 W3C 的盒模型的话，也可估算出非边距 al宽度是：

0.1em + .9em + 50em + .9em + .1em = 52em

在 screen 媒体上，浏览器会采用此值，将所有属性值分别取整为最接近的像素值，并按照这些值来进行最终效果渲染。

W3C 盒模型中的百分比边距和填充距

使用 W3C 盒模型时，百分比的边距和填充距是相对于其包含元素的 width 计算值来计算的。例如，如果为一个包含在 800 像素宽的元素中的元素指定 margin: 20%，该元素周围的边距就是每边 160 像素（800 的 20% 是 160）。

如果对这个元素指定 padding: 5%，它的内容宽度计算值就是400像素:

20% + 5% + 5% + 20% = 50%
0.50 × 800 = 400
800 ? 400 = 400

对文件流进行处理

由于后面的教程要讨论多栏式布局的制作，本文下面将介绍三个 CSS 属性：display、float 和 clear。

元素类型和显示属性

除 html、body 和 table 部分之外，在 HTML 4.01 推荐中与主要内容有关的所有元素都有一种相关联的类型：内联或块。每种类型以不同方式决定了默认布局表现：

inline

• 紧接在内联元素前/后的文本和图片与内联元素的内容渲染为同一基准线。但如果该文本或图片过长，它们就会与包含元素的边缘相重叠，在这种情况下，内嵌内容就会跑到一条新基准线上面，而该基准线位于之前的那条基线的下面。
• 内联元素中，文本行的布置会视需要（或允许）而带有软换行符，除非用 white-space 属性修改了这种方式。
• 样式表规则中可应用于这些元素的 margin、width、height 和 float 属性被忽略。（除了 img 和 object）
• 内联元素只能容纳文本或其它内联元素。

block

• 这些元素将在其容器中渲染为离散块。
• 这些元素的前后将总是渲染有断行点，除非将 float 值设为 left 或 right。
• 如果嵌套块元素之间没有任何内容，它们之间的断行点通常会被合并。
• 宽度为 auto（默认）的块元素会一直扩展，直到占满所有可获得的宽度。

display 属性有三个常用的值¬——block、inline 和 none——其中两个是指对应的元素类型。改变元素的 display 值可以使内联元素的表现方式像块元素那样，也可以使块元素的表现方式像内联元素那样，还可以改变文件的渲染效果，使之看起来就像元素（和它的所有内容）根本不存在一样。

一般来说,了解默认情况下哪些元素与哪些类型相对应是很关键的，其关系简列于表2中:

元素	类型	子类型	说明
a	inline	special
abbr	inline	phrase
acronym	inline	phrase
address	block		一般与p的行为方式类似
blockquote	block		在!DOCTYPE声明为Strict时，必须包含至少一个块元素
body			封装了整个文档画布；一般会有 10px 的边距（在 IE, Firefox 和 Safari中）或是填充距（在Opera中），像素大小视所用的 screen 媒体而定
cite	inline	phrase
div	block
em	inline	phrase
fieldset	block		默认情况下一般按照 border: 1px black; 渲染
form	block
h1 … h6	block	heading
input	inline	formctrl
img	inline	special
label	inline	formctrl
li	block		文档类型定义中没有指明该元素的类型，但该元素可包含块元素和内联元素；完成版的 CSS2.1 推荐为列表项留出了 display 值
ol	block	list
p	block		只能包含内联元素；一般会渲染有顶边距和底边距
span	inline	special
strong	inline	phrase
table	block
ul	block	list

表2: 常用 HTML 元素和它们的类型。只有具有相同子类型的相邻块元素之间的边距才会合并。

示例5

只是为了做个演示，将标题中的 “Prologue” 注释掉怎么样？

链接:

• 从标题中移除不相干的部分
• 示例5的样式表

新规则:

.sectionNote { display: none; }

使元素环绕于其它元素周围: 浮动属性

本段左边放了一张照片。当然你们都会看到后面的文本自然地环绕于其周围，尽管有人得先停止琢磨为什么著名的科幻小说家要在他的猫身上绑块儿熏肉——即使今天是他的慢调生活日。我们可以用 HTML 属性来指定你所看见的布局表现，但在这个例子中该效果是由 CSS 完成的。

可以猜到，这个戏法是由 float: left; 这一属性/值组完成的。在后面的文章中将会介绍运用浮动这个好点子，但有必要在这里谈谈它的基础。float: right 是极有用的属性/值组。如果你要取消一个引用了 float 的 class 赋值，你可以指定 float: none。

float 属性有一些用法说明：

• 只有将 float 值应用于带有显式 width 的块元素时，它才起作用。
• 可以将float、clear 和 margin 属性一起用在样式表中，来在布局中创建栏。
• 让一个浮动元素延伸到其容器的底部比较难，但也不是不可能。这样做的常用方法被称作伪列布局。

示例6

之前已经谈过了在格言引用上赋 float 值的问题。那么完成之后，我们就可以来看看效果。我们可以添加一些背景颜色使它与主要内容区别开来。

链接：

• 将格言引用浮动至右边距处
• 示例6样式表

新规则:

.pullQuote { float: right;
background-color: rgb(204,204,204); }

强制使元素处于其前一个浮动元素之下:清除属性

像 float 属性一样，可指定 clear 属性为 left、right 或 none 三者之一。清除属性也支持 both 值。

float 属性指令其它元素的内容如何环绕浮动元素，clear 属性则规定了元素如何环绕其相邻元素¬——在许多实例中，是规定不要浮动。

图 6 显示了 clear: left; 的表现；此布局中两个原来连在一起的元素被指定了相同的 height 值，而 float 值分别设为 left 和 right：

图 6：因为高度相当，clear:left 使底部盒子清除了两列的浮动。

前一示例中 #cLeftWidget 的默认环绕会将它置于希腊语文本下面¬——即，#fLeftWidget 和 #fRightWidget 之间 。

想想看，如果这一组元素中前一个元素比其右对齐的同僚短，会出现什么效果？如图7所示：

图 7: 当右列比左列长时，clear:left 不会清除两列，所以必须用 clear:both。

在前一个例子中，后续元素的 clear 值设为 left 是为了表明一个观点：因为两个 float 的元素等高，clear 的元素会被推到两者下面。但是，第二个例子证明为了从高度不等的 float 元素取得相同的结果，必须用到 clear: both;。

这里对 clear 属性的探讨可看做其效果的简单介绍，后面的文章会更深入地对该属性的用途和技巧进行讨论。

总结

由于渲染引擎的种种差异，对全面涵盖传统的定义基础的需要，对浏览器窗口大小预计的无能为力，对 Web 文档的布局都充满了困难和限制。但是，一般的 CSS 支持水平已经可以轻易地使 Web 文档在浏览器上得到满意的效果。

延伸阅读

• Bergevin, Holly, and Gallant, John. 2006. Explorer exposed. Position Is Everything. http://positioniseverything.net/explorer.html (accessed 1 July 2008).
• Bos, Bert, et al. 2007. Cascading style sheets level 2 revision 1 (CSS 2.1) specification. World Wide Web Consortium. http://www.w3.org/TR/2007/CR-CSS21-20070719 etc. (accessed 30 June 2008).
• Raggett, Dave, et. al. 1999. HTML 4.01 specification. World Wide Web Consortium. http://www.w3.org/TR/1999/REC-html401-19991224 etc. (accessed 30 June 2008).
• Raymond, Eric, and Steele, Guy, eds. 2003. Brute force. The Jargon File (Version 4.4.7). http://www.catb.org/jargon/html/B/brute-force.html (accessed 30 June 2008).
• Scalzi, John. 2006. Clearly you people thought I was kidding. Whatever. http://www.scalzi.com/whatever/004457.html (accessed 30 June 2008).

练习题

1. 缩写的 margin 值或单个边距属性如 margin-top 分别适用于什么情况？
2. 什么时候缩写的 margin、padding 和 border-width 属性要写出全部四个值，这些值是按什么顺序作用于元素的四边的？
3. I如果你想在一个文档里所有标题的文本下都画一条线，你该使用那种属性？
4. 为了使一个元素看起来像一个界面按钮，你会用那种 border-style 值？
5. 判断： 默认情况下，在元素周围添加边框会不会也在这个元素的内容周围添加缝隙？ 如果创建的元素跟它的容器不一样宽，你需要设置那组属性/值以确保元素在其容器内水平居中？
6. 判断： 如果将一个容器元素置于 body 中，给它的 width 设一个大于 100% 的值，文档画布的表现会不会变？
7. 如果图片对包含元素来说过大，你会用哪种属性/值来保证你的页面不会溢出，为什么？
8. 给 a（链接）元素的 display 值设为 block，并给它设一个合理的高度和宽度，在 screen 显示媒体上这个链接的鼠标经过行为是如何变化的？
9. 通常情况下，块元素会扩张来填满其容器的宽度（除了边距，边框和填充距）。默认情况下，如果该元素前面有一个 float 的元素，该元素的行为是确实发生了变化，还是只是看起来发生了变化？
10. 如果想要给某个元素应用一个 float 值，在那个元素上你还需要设定什么属性？
11. 如果你想绝对保证一个元素总会扩展而填满其容器的宽度，你该设置哪组属性/值？

评论 (0) All

登陆 还没注册？