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

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

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

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

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

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; }

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

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

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

链接：

• 在 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. 如果你想绝对保证一个元素总会扩展而填满其容器的宽度，你该设置哪组属性/值？