第3章 正文布局

用CSS进行页面布局需要了解很多不同的技术，设计师也要有相当的创造性思维。无论选择固定布局还是流式布局，无论作品靠左还是居中对齐，都需要对CSS布局有着良好的把握能力。

本章将介绍布局方法、CSS定位准则、浮动（float）的使用等内容，并将介绍如何将这些概念有机地结合起来，创建出实用、引人注目甚至——在某些情况下——出人意料的效果。

3.1 Backyard（庭院）

Ray Henry，设计师

www.csszengarden.com/029

理解绝对定位和浮动

良好的开端是成功的一半，但有时作品的开端却并不是那么的容易。当然，灵感可能在任何时间、任何地点迸发。坐在公园的咖啡馆中一边品尝着美味的lattés，一边和朋友们谈天说地、消磨时光——不经意之间，很多足以改变世界的想法就这样悄然到来。Ray Henry设计Backyard的灵感来自两个花园——禅意花园和他自己的花园。Backyard页首的那幅栩栩如生的相片正是来自于Henry自家花园中的花朵。

Henry在用CSS完成作品时遇到的最基础的问题就是，如何实现三栏布局。Henry也想知道他所熟悉的表格布局效果能否同样用CSS实现。能将链接栏放在最右边吗？如果能的话，应该怎么做呢？需要什么特殊的技巧么？最好的方法就是一个接一个地慢慢尝试，Henry也正是在这样的尝试中完成了该作品。

3.1.1 布局基础

在用CSS实现分栏布局之前，需要了解一些预备知识。CSS并没有提供诸如“left-column: 200px”之类的直观分栏属性，因此我们必须要用一些技巧来突破这些限制。

实现分栏布局主要有两种方法，每种都各有利弊。第一种方法是使用四种CSS定位选项（absolute、static、relative和fixed）中的绝对定位（absolute positioning），它可以将文档中的某个元素从其原本位置上移除，并重新定位在期望的任何地点之上。第二种则是使用CSS中的浮动（float）概念。浮动并不是一种用作定位的选项，而是为元素分配一定的空间，然后让文档中的其他部分将自动环绕在其周围。

绝对定位或浮动都能够用来实现分栏效果。二者可以独立使用，也可以结合在一起，相辅相成。

1.绝对定位

与浮动相比，绝对定位显得更易于理解。若在文档中依次声明了一系列元素（简称为常规文档流，normal document flow），就像下面这段HTML这样，那么这些元素将会按照声明次序显示在页面中（图3-1-1）——没有什么特别的。

图3-1-1 常规文档流中的元素

<h3>The Road to Enlightenment</h3>

<p>Littering a dark and dreary road lay the past relics

of browser-

　specific tags, incompatible DOMs, and broken CSS

　support</p>

但若是用绝对定位将某一元素（这里是h3元素）移动至指定位置，那么该元素原来占据的空间将消失（图3-1-2）。绝对定位的元素也不会对其旁边的元素带来任何影响，就像文档中根本不存在这个元素一样（虽然实际上在页面中仍能看到）。实现绝对定位的代码如下：

图3-1-2 绝对定位h3之后，其原本的位置被下面的段落占据

h3 {position: absolute; top: 100px; }

Note

CSS并不能直接实现分栏布局，一般来讲这种说法是正确的。但CSS 2引入的CSS Table概念实际上却能够实现这个效果。很不幸的是，Windows平台上的IE并不支持这个标准，所以这个概念也无法用于实际开发中。噢，真遗憾！不过若你对CSS Table感兴趣的话，可以参考www.w3.org/TR/CSS21/tables.html。

绝对定位的优势就在于，我们可以丝毫不差地精确控制任何元素的位置——这里面没有什么需要猜测或者运气的成分。由于应用了绝对定位的元素被不留痕迹地从常规文档流中完全移除，所以它也不会为其他元素带来任何的影响。当然，这也可能会导致一些其他问题，将在本节稍后部分介绍。

2.浮动

与绝对定位相比，浮动更加具有技巧性。这里我们给出了几幅示意图：图3-1-3是一篇较长的文章。若是在文章中添加了一幅图片，那么该图片将占据一定的空间，并将其之后的文字推向页面下方（图3-1-4）。为了避免插入图片造成的两部分文字的不连续，我们可能会希望下面的文字填充到图片右边的空白中（图3-1-5），充分利用页面空间。

图3-1-3 正常的文字

图3-1-4 插入图片之后，上下两段文字间出现了间隙

图3-1-5 环绕在图片周围的文字填充了图片右边的空白

这正是CSS浮动的本意和要点所在：若将插入到文章中的图片设置为浮动，那么图片下方的文字将自动环绕在其周围，页面上也就自然不会出现那块丑陋的空白。

浮动的语法看似简单，但却并不那么容易完全掌握。对于上面的这个场景，CSS代码将类似如下所示：

photo {float: left; margin: 10px 10px 10px 0;}

这段代码非常简单易懂，其效果也不难预测。

采用浮动实现布局的优势在于，浮动元素仍保留在文档流中，其周围环绕的元素也都清楚它的位置。但由于不同的浏览器对浮动的支持良莠不齐，所以浮动布局也并不是完美之选。因此，只有有了相当的实践经验之后，我们才能够在设计时游刃有余，合理地选择并使用上述两种布局方法。

3.1.2 布局方法

在本节开始部分Backyard的截图中可以看到，整个作品分为三栏，并带有页脚。出于对搜索引擎优化以及禁用浏览器CSS选项的用户的考虑，源代码中主要内容区域¹声明在左右两栏之前——正文部分在源代码中的位置越靠前，就越会被首先下载并显示于浏览器中，那些次要的导航条和链接也不会占据下载刚开始时的那段宝贵时间。

注释：¹ 即中间一栏。——译者注

<div id="wrapper">

　<div id="contentArea">

　　<p>(headers and text here)</p>

　</div>

　<div id="leftPanel">

　　<p>(links and various text items here)</p>

　</div>

　<div id="rightPanel">

　　<p>(links and various text items here)</p>

　</div>

　<div id="footer">

　　<p>(Copyright statement, links, etc.)</p>

　</div>

</div>

几乎不假任何思索，我们就能想出一个快速但并不那么优雅的布局方法——使用绝对定位：首先分别为三栏指定固定的宽度，然后从页面的左上角开始为这三栏依次指定固定的位置即可。若是不考虑页脚的话，现在就算大功告成了（图3-1-6）。

图3-1-6 简单的三栏布局

contentArea {width: 450px; position: absolute; top: 0;

　left: 150px;}

leftPanel {width: 150px; position: absolute; top: 0;

　left: 0;}

rightPanel {width: 150px; position: absolute; top: 0;

　left: 600px;}

footer {display: none;}

这三栏都是靠左的，但若是要让它们居中显示，就像图3-1-7那样，又该怎么做呢？同样很简单：绝对定位模型中有个极为有用的特性，那就是若某个绝对定位元素的容器也被定位过，那么为该元素指定的top和left值将不会基于文档的根元素html（也就是浏览器窗口的左上角）计算，而是会基于其容器的左上角计算这个偏移量。

图3-1-7 同样的三栏布局，但居中显示

有些糊涂了？没关系，你可以这样理解：被定位过的容器将扮演其中所有元素绝对定位起始点的角色。所以，若是我们将#wrapper定位，并让其居中显示的话，其包含的各栏将仍显示于其中。下面的CSS代码就演示了其具体的实现方法（由于Windows平台上IE5浏览器的缺陷导致其不能将外边距为auto的元素居中显示，所以我们需要使用两个text-align属性辅助IE5下的定位）：

body {

　text-align: center;

}

wrapper {

　width: 750px;

　margin: 0 auto;

　text-align: left;

　position: relative;

}

contentArea {

　width: 450px;

　position: absolute;

　top: 0;

　left: 150px;

}

leftPanel {

　width: 150px;

　position: absolute;

　top: 0;

　left: 0;

}

rightPanel {

　width: 150px;

　position: absolute;

　top: 0;

　left: 600px;

}

Tip

不知为何，Windows平台下的IE浏览器会神秘地将某些浮动元素的水平外边距值加倍¹。若元素的外边距值足够大（例如超过10px）时，效果将变得极为明显。这是个令人头痛不已的问题，甚至会给你带来强烈的挫折感。一个权宜之计就是为该浮动元素应用display:inline属性。若你想了解更多有关这个缺陷的分析，请浏览Position is Everything网站（www.positioniseverything.net/explorer/doubl ed-margin.html）。

注释：¹ IE7已经修复了这个问题。——译者注

但页脚又该如何处理呢？由于绝对定位的三栏并不会影响到页面中其他的元素，所以页脚将忽略它们的存在，就像这三栏根本不在页面中一样。因此，在这里页脚将显示在页面第一个元素的位置上。

若仍要采用绝对定位的话，那么必须预先知道这三栏中每一栏的高度，然后再根据其中最高的一栏定位页脚。若是三栏中任意一栏中的文本长度无法确定的话，除了使用JavaScript，我们也只能放弃绝对定位的念头，转而投入到浮动布局的怀抱中。

图3-1-8所示的页面布局就是使用浮动实现的。页脚自动清除了左中右三栏的浮动设置，并定位于三栏之下。

图3-1-8 同样的三栏布局但包含页脚，使用浮动实现

body {

　text-align: center;

}

wrapper {

　width: 750px;

　margin: 0 auto;

　text-align: left;

　position: relative;

}

contentArea {

　width: 450px;

　float: left;

}

leftPanel {

　width: 150px;

　float: left;

}

rightPanel {

　width: 150px;

　float: left;

}

footer {

　clear: both;

}

图3-1-8中可以发现一个明显的问题，那就是左栏和中栏交换了位置。因为浮动布局依然遵循常规文档流，所以与绝对定位相比，浮动定位时HTML源文件中元素声明的位置就显得格外重要。当然，解决这个问题的最简单方法就是在源文件中交换左栏和中栏的声明次序。对于这个问题还有些极为晦涩的解决方法——使用负外边距值等较另类的方式。所以一般情况下，人们十有八九都会选择交换源文件中左中两栏的声明次序。

Tip

关于使用负外边距的解决方案，请参考Ryan Brill的示例：www.alistapart.com/ar ticles/negativemargins。

3.1.3 绝对定位的补充

在尝试过许多不同CSS布局方法之后，Ray Henry还是决定用绝对定位完成他的三栏作品Backyard。我们有理由相信，在许多情况下，包括Backyard在内，绝对定位是最简单且最有效的一种布局方法。

但绝对定位也不是万能的，使用时也难免会遇到一些问题。对于那些需要考虑页脚，或是页面中其他元素需要了解其周围元素的页面布局来说，浮动则将成为不二之选。无论绝对定位还是浮动都谈不上完美，但它们却组成了CSS中的最具可操作性的布局工具。合理恰当地选择某种方法，或者组合使用这两种方法，将能够随心所欲地控制页面的布局——唯一可能让作品受到限制的就是创造力。

3.2 Entomology（昆虫学）

Jon Hicks，设计师

www.csszengarden.com/030

当代Web设计中的居中布局

兴趣是创意的源泉。Entomology的想法正是来自于一个音乐视频——Yeah Yeah Yeahs’ single “Pin.”。Jon Hicks虽然愿意基于禅意花园进行设计，但却不想让作品太过千篇一律。视频“Pin”中的很多用大头针钉起来的蝴蝶的照片却恰好和Hicks的想法出奇的一致。

在草草勾画出设计方案之后，Hicks直接开始了CSS实现，而并没有首先在Photoshop创建原型。由于这只不过是个个人的小项目，加之Hicks平日的工作也很繁忙，所以他并没有按照标准的设计流程进行。Hicks甚至还声称要戴上太阳帽，拿着用来捕捉蝴蝶的网去找到第一手的感觉！这样做的结果就是，该作品与Hicks的惯用作品风格截然不同。

3.2.1 固定布局和流式3.1.2 （liquid）布局

按照惯例，Web页面的布局可以分为两类：固定布局和流式布局。固定布局是指页面有着固定的宽度，居左、居右（这种情况比较少见）对齐，或者居中。但页面内容的宽度却不随着浏览器窗口的宽度变化而变化。Entomology就是一个固定布局的例子（图3-2-1）。

图3-2-1 固定布局页面示意图

流式布局又叫做不固定（fluid）布局或动态（dynamic）布局。这种布局的页面宽度用百分比指定，而不是某个固定的宽度，所以当浏览器窗口大小变化时，页面宽度也随之变化，始终保持填满浏览器（图3-2-2）。

图3-2-2 流式布局页面示意图

我们同样也可以将固定布局和流式布局结合起来使用。例如对于某个三栏页面来说，左右两栏可能有着固定的宽度，但中间一栏的宽度却用百分比定义（或者不定义其宽度）。这样，作品将始终填满浏览器窗口，在改变浏览器窗口大小，或是在不同分辨率下浏览该页面时，中间一栏的宽度将相应地变大或变小。

就像许多其他流行的东西一样，人们对固定布局和流式布局的偏好和倾向也在不停地变化。在早期的Web设计中，固定布局曾风靡一时。但一段时间之后，人们开始认识到流式布局的好处。几年中流式布局又变得如日中天。

在过去的两年中，固定布局似乎再一次占据了上风——特别是在那些推崇标准的设计师眼中。此时此刻，几乎所有的业内领先者都在他们的网站或作品中使用了固定布局。这是个很有意思的倾向，之所以人们再次开始钟情于固定布局，是因为它们主要考虑了如下几个明显问题。

首先，也是最重要的一点就是，由于作品区域大小固定，所以设计师在控制固定布局页面时将更加游刃有余。即使对于图文混排的情况，一行中文字的长度同样易于控制。固定布局的再次流行在很大程度上正是因为这些原因。

当然，流式布局也有它的优势所在。填满浏览器窗口意味着最大限度地利用了空间，且与那些居左对齐的固定宽度作品相比，流式布局设计避免了另一半页面的空白，显得更为平衡。流式布局的劣势在于我们无法精确控制行长、页面布局以及元素的位置。即使对于那些资深设计师来说，这些问题也都值得仔细斟酌，且现今也没有什么完美的解决方案。

对于固定布局作品导致的视觉失衡问题，设计师一般通过让作品水平居中显示来解决。这样当改变浏览器窗口大小时，空白部分将始终平均分配在页面的左右两侧，不至于让页面的右侧显得太过单调。

3.2.2 让作品居中显示

用CSS让元素居中显示并不是件很简单的事情——同样的合法CSS居中设置在不同浏览器中的表现行为却各有千秋。在处理Entomology时Hicks也自然遇到了这个问题，但幸运的是，他最终找到了一种临时补救措施。在介绍他的做法之前，让我们先来看一下CSS中常见的几种让元素水平居中显示的方法。

1.使用自动外边距实现居中

CSS中首选的让元素水平居中的方法就是使用margin属性——将元素的margin-left和margin-right属性设置为auto即可。在实际使用中，我们可以为这些需要居中的元素创建一个起容器作用的div。需要特别注意的一点就是，必须为该容器指定宽度：

div#container {

　margin-left: auto;

　margin-right: auto;

　width: 168px;

{

图3-2-3演示了这种方法的实际效果，图中的蝴蝶图片来自Hicks的作品。将该图片放置于一个div中，并使用自动外边距的方法让其居中显示。

图3-2-3 使用自动外边距让元素居中显示

在大多数主流浏览器中，这种方法都非常有效，即使是Windows平台上的IE6，在其标准兼容模式（compliance mode）下也能够正常显示。但不幸的是，在更低版本的IE中，这种设置却并不能实现居中效果。所以若想在实际项目中使用这种方法，那么就要确保用户的IE浏览器版本必须不低于6.0。

表3-2-1列出了常见浏览器对自动外边距居中的支持情况。

表3-2-1 浏览器的自动外边距支持

注释：¹ 原书并没有包含IE 7.0的相关条目。——译者注

注释：² 或译作“怪异模式”。——译者注

Note

标准兼容模式是一种浏览器技术，又叫做DOCTYPE切换（DOCTYPE switching）。禅意花园的XHTML就通过恰当的DOCTYPE设定让浏览器以标准兼容模式显示页面。这个概念非常重要，请参考Matthias Gutfeldt的“Doctype switching and standards compliance: An overview”（http://gu tfeldt.ch/matthias/articles/doctypeswitch.h tml）了解更多细节。

尽管在支持上不尽如人意，但大多数设计师都建议尽可能地使用这种方法。该方法也被认为是在各种用CSS实现元素水平居中方法中最正确、最合理的一种。

2.使用text-align实现居中

另一种实现元素居中的方法是使用text-align属性，将该属性值设置为center并应用到body元素上即可。这种做法是彻头彻尾的hack，但它却能兼容大多数浏览器，所以在某些情况下也自然必不可少。

之所以说它是hack，是因为这种方法并没有将文本属性应用到文本上，而是应用到了作为容器的元素上。这也就给我们带来了额外的工作。

在创建好布局必须的div之后，我们要按照如下代码为body应用text-align属性：

body {

text-align: center;

}

之后会出现什么问题么？body的所有子孙元素都会被居中显示（图3-2-4）。

图3-2-4 在IE中使用text-align实现居中。可以看到div中的文本也继承了居中的样式

因此，我们就需要用再写一条规则，让其中的文本回到默认的居左对齐：

p {

　text-align: left;

}

可以想象这条附加的规则将带来一些不便。另外，真正完全遵循标准的浏览器并不会改变容器的位置，而只会让其中的文字居中显示。

3.组合使用自动外边距和文本对齐

因为文本对齐居中方式有着良好的向下兼容性，且自动外边距方式也被大多数当代浏览器支持，所以很多设计师将二者组合起来使用，以期让居中效果得到最大限度的跨浏览器支持：

body {

text-align: center;

}

container {

　margin-left: auto;

　margin-right: auto;

　border: 1px solid red;

　width: 168px;

　text-align: left

}

可是这始终是个hack，无论如何也算不上完美。我们还是需要为居中容器中的文本编写附加的规则，但至少在各个浏览器中看起来都不错。

4.负外边距解决方案

考虑到Entomology的特殊挑战，Hicks决定用另外一种方案来实现页面居中——使用负外边距。

负外边距解决方案远不是仅仅为元素添加负外边距这么简单。这种方法需要同时使用绝对定位和负外边距两种技巧。

下面将介绍该方案的具体实现方法。首先创建一个包含居中元素的容器，然后将其绝对定位于相对页面左边缘50%的位置。这样，该容器的左外边距将从页面50%宽度的位置开始算起（图3-2-5）。

图3-2-5 将容器绝对定位于相对页面左边缘50%的位置

Note

需要注意的是，负值的外边距在CSS中是完全合法的。使用负外边距可以解决很多设计中遇到的问题，例如让一些块级元素部分重叠在一起等。

然后，将容器的左外边距值设置为负的容器宽度的一半。这样即可将该容器固定在页面水平方向的中点（图3-2-6）。

图3-2-6 添加负的容器宽度一半的左外边距值之后，容器将居中显示

下面就是Entomology所用到的CSS代码：

container {

　background: #ffc url(mid.jpg) repeat-y center;

　position: absolute;

　left: 50%;

　width: 760px;

　margin-left: -380px;

}

看，没有任何hack！虽然这并不是首选的解决方案，但也是个不错的方法，且适用性极广——甚至在Netscape Navigator 4.x中都没有任何问题，很令人吃惊，不是么？所以若想得到最广泛的浏览器支持，那么这种方法将会是最好的选择。

Note

在计算时要格外小心，无论是内边距还是边框都要计算在容器宽度中，否则将不会得到期望的结果。

3.2.3 跟上趋势的发展

虽然谁也无法确定今后趋势的发展方向，但这些固定布局的优秀作品将始终在Web设计中占有一席之地。固定布局是一类非常经典的Web页面布局方式，每个设计师都应该掌握它的实现方法。

可以根据目标用户的浏览器分布以及个人喜好来选择并使用本节列出的这几种居中方案。对于Entomology来说，用绝对定位和负外边距来实现内容居中确实是个“时髦”的选择，让作品能够在绝大多数浏览器中正常显示——甚至在那些相当“古老”的浏览器中也没有任何问题。

3.3 White Lily（白百合）

Jens Kristensen，设计师

www.csszengarden.com/036

创建有效布局的法则与步骤

尽管禅意花园没有对提交作品的设计方面有什么要求，但Jens Kristensen还是发现了其中暗含的四个关键词，那就是：视觉效果（visual）、CSS、禅意（Zen）和花园（Garden）。这四个关键词让Kristensen牢牢把握住了设计的精髓，那就是作品应该给人以放松、平静的类似植物一般的平和感觉。

体会到暗含的精髓之后，Kristensen开始研究如何用恰当的设计布局来表现这个含义。从实现方式看，White Lily的布局极为实用，全世界的众多网站都能够从该作品中找到值得借鉴的地方。

3.3.1 Web页面的布局法则

我们经常简单地将“布局”这个单词理解为页面中包含多少栏内容。正在学习使用CSS的人们经常会这样问：“如何创建三栏布局？”或“如何创建带有页首和页脚的布局？”。这些问题自然无可厚非，并且也相当重要，但在开始考虑如何实现这些布局之前，我们最好还是先了解一下为何要选用这种布局，即布局背后的法则。

用来实现布局的任何一种技术，无论多么的巧妙甚至花哨，其根本都是为了体现某种布局法则。这种法则在Web诞生之前就已经存在了。虽然Web的出现也在不经意间改变了某些法则中的条款，但其仍旧是创建漂亮且实用的布局的最基本原理，重要性丝毫不减当年。

在任何一种以图画作为表意方式的艺术作品中，布局都将起到同样的作用——有效地组织内容。而实际作品中千变万化的布局效果，则是因为作品的传播媒介、内容以及欣赏者各有不同。对于Web设计来说，布局还有一个功能，那就是辅助实现页面的功能。一个成功的布局必须能够有效地将链接、菜单、表单等元素集成到作品中。最后，布局也是保证网站一致性的重要基石，风格统一的网站将更易于使用者理解，带来更好的可用性。

3.3.2 三思而后行

在完成White Lily设计的过程中，给Kristensen最大帮助的就是他在一开始就组织好了页面的内容。

事先组织内容主要出于如下几个目的。最明显的就是，能够对接下来要做的事情有清楚的认识，并自然分清不同内容之间的主次关系。这样也能对页面布局及其实现方式进行更深层次的思考，进而更好地把握住作品的形式以及功能。

Note

如果熟悉其他形式的以图画作为表意方式的艺术作品，例如印刷或包装设计，那么很容易就能发现一些只有在处理屏幕上的作品时才会遇到到的挑战。Web设计方面的新手只要记住这一点：虽然Web设计与印刷作品有着一些共性，但大多数时候它们却是截然不同的。

Kristensen首先将禅意花园的内容分为了三大类。

□ 概要内容，例如模板、验证链接和禅意花园介绍等。

□ 链接和导航部分内容。

□ 核心内容。

有了这些归类之后，Kristensen开始组合页面中的元素。目前他有两个非常清楚的目标：实现设计理念，并将内容清晰地分为三段。在确定最终样式之前，Kristensen还进行了若干次的修改（图3-3-1）。

图3-3-1 White Lily的另一种样式

最后，Kristensen将样式确定下来，也就是这个已提交的版本，并完成了White Lily的设计。需要特别注意的是，作品布局的选择取决于页面的内容以及视觉上的需求，并不能随意而为或是盲目跟随当前的流行趋势。

3.3.3 White Lily布局的实3.3.3 现方式

由于对设计步骤有着清晰的认识，Kristensen根据作品的主题和内容选择了最恰当的设计方式。

Kristensen发现百合花的照片最能体现出他所期待的植物的感觉。在这幅百合花照片中，他也确定了作品中将使用的颜色。Kristensen同样也在某些细节上尽可能恰到好处地进行润色，加深植物的意味（图3-3-2）。

图3-3-2 White Lily中使用的三种象征着花的符号，增强了作品的“植物”意味

在开始处理内容时，Kristensen的作品就已经相当光彩夺目。因为事先已经明确了目标，Kristensen很容易够判断出不同内容之间的重要性，然后通过适当的布局体现出来。

通过将概要信息放置于页首位置，Kristensen实现了两个很重要的目标：为作品打上烙印（这里是那幅百合花和“CSS Zen Garden”标题），以及表明该页面的创建动机。同样出现在这部分的还有示例HTML和CSS文件，以及验证链接等内容（图3-3-3）。

图3-3-3 这里实现了一个很重要的需求：将相关内容有效地放在一起

这样的设计也便于接下来处理最主要的两个关键之处：导航部分与核心部分的内容。Kristensen将导航链接置于页面的左栏中，这种布局非常不错，因为导航链接本身就应该在这里。右栏则用来显示核心内容。核心内容中每一节的样式都很轻柔，保持了作品的简洁性。另外，两栏布局也符合了设计的目标及需求，整个作品虽然简单，却仍然能够给人带来相当的美感。

3.3.4 布局的灵感和法则

一旦明确了设计目标，即可充分利用布局上的一些通用法则来帮助设计。这一节将介绍Web布局中的一些常见的注意事项。共分为两大类——用户界面（User Interface，UI）设计和可用性，这些都是良好的Web设计中不可或缺的要素。

1.用户界面设计

与印刷作品只能够被动地传递信息不同的是，Web页面还提供与用户交互的功能。由于计算机技术领域中交互性的界面无所不在，例如操作系统和软件应用程序等，所以用户界面设计的相关理论已经发展得较为成熟。

下面给出了一些用户界面设计中的基本法则。

□ 了解将浏览页面的用户。

□ 在页面和站点中给用户足够的导向。

□ 使用被人们熟知的象征符号。一个很好的例子就是电子商务网站中的购物车符号。即使是刚学会上网的用户也能容易地了解其含义（图3-3-4）。

图3-3-4 在用户界面设计中，象征符号非常重要。例如这个来自amazon.com的购物车符号就是全球通用的，且非常易于识别，所以很多电子商务网站中都使用了类似的符号

□ 保证与功能相关的特性在页面中足够显眼。在White Lily中，功能相关的特性就是左栏中的各个链接，这些链接都极为简洁地表达了其功能含义（图3-3-5）。

图3-3-5 White Lily中的导航链接

□ 保证设计元素的一致性。若把White Lily的布局应用到某个网站之上，那么该网站中的各页面间的导航链接应该保持一致，LOGO图片和标题的位置也要始终如一。若在站点的不同页面中标题或功能元素的位置不统一，用户将对此感到非常困惑——因此，我们要尽量避免这种情况的发生。

□ 了解页面中的关键元素。在一幅作品中，总是会有一些能够吸引用户最多关注的特殊元素。例如White Lily中的百合花就属于这类。意识到某图片对整个作品带来的重要影响之后，设计师即可通过调整其他的页面元素来相应地让作品达到视觉上的平衡。

□ 清楚地表达页面的内容。人类的注意力持续时间较短，通常来讲最多9秒钟——若是在这个时间段之后还是不能了解页面的主要内容，那么用户就会彻底放弃。Kristensen通过在布局中将页面介绍分离并置于独立位置中，让用户一眼就可以把握到页面的主旨（图3-3-6）。

图3-3-6 将主题句布局在页面的独立位置有助于让用户了解页面的创建目的

由于美学与页面功能有着紧密的联系，所以界面设计师对此也非常感兴趣。注意White Lily左栏链接区域中的箭头。每个大小都相同，给用户带来审美上的愉悦感的同时也给了用户充分的导向提示（图3-3-7）。

图3-3-7 列表头部使用的箭头图标既具有美感，也有着一定的功能性——将用户的目光引导至下方的内容

2.可用性

虽然概念上与用户界面设计类似（在历史上二者的发源也相同），但可用性关注的领域却与前者不同。顾名思义，用户界面设计更加关注用户——其最主要的研究目的就是让开发者和工程师能够更好地满足用户的需求。

但可用性研究则更加关注最终的用户体验，即用户是如何与已经开发完成了的程序进行交互的。二者相辅相成，可用性研究影响了UI设计技术以及设计流程的发展，用户界面设计也给用户以测试修改的平台，帮助作品实现更好的整体可用性。

与UI设计一样，可用性研究也源于其他计算机技术领域并有着很长的历史。Web可用性研究是可用性研究中的一个子集，且有着它自己的法则与最佳实践。

下面列出了一些与布局相关的可用性问题。

□ 重要信息应放在显眼的位置。当然，Web设计中“显眼”只是个相对概念，但通常来讲这一条也很易于实现：将用户最需要的信息尽可能地放在页面的最上部。在White Lily中，最重要的就是百合花的照片和页面标题，它们都放在了页面的顶部，让用户一眼就能发现（图3-3-8）。

图3-3-8 包含页面中最重要信息的页首部分位于屏幕的最上部

Note

Boxes and Arrows网站（www.boxesa ndarrows.com）提供了很多有用的用户界面设计以及交互设计的资源。

□ 永远在title元素中给出页面的简单介绍：

<title>css Zen Garden: The Beauty in CSS Design</title>

这段文字将显示在浏览器标题栏中，起到充分的导向作用（图3-3-9）。

图3-3-9 虽然不是页面布局的一部分，但标题栏中的文字还是能够在很大程度上帮助用户了解站点的主题

□ 尽可能地保证页面中的导航链接有着一致的表现。同样也要确保页面中包含回到站点首页的链接。作品中最好还要提供版权页面、隐私策略以及联系信息等内容。禅意花园中的所有作品都受到创作公用许可协议的保护，这些在文字上都有体现（图3-3-10）。

图3-3-10 版权以及授权信息非常重要，要有效地体现在页面中

□ 对于中型或大型站点来说，强烈建议提供搜索功能。当然，与通常的网站不同，禅意花园更加偏重于展示设计，但在真实世界中的网站中，用户非常乐于使用搜索功能。也就是说，搜索功能的位置要让用户用直觉就能够发现。通常来讲，搜索框一般应被放在与其逻辑相关的位置上：导航条附近就是个不错的选择。若为White Lily添加搜索功能，那么最佳的位置就是在导航链接之上（图3-3-11 ）。

图3-3-11 若该站点中启用了搜索功能，那么该功能很有可能位于导航链接部分之上

□ 用缩进和偏移将栏中内容分开。这一点在实现页面整体效果以及提高用户接受度中至关重要（图3-3-12）。

图3-3-12 有趣的是，栏中的文字缩进能够帮助用户理解其功能。此处，最主要的链接列表就使用了缩进，将栏中内容分开的同时，也让作品整体显得更加大气

当然，可用性远不止这些。但在设计布局中合理地使用这些技术将大大充实、完善作品的功能与形式，最终带来更好的用户体验。

Note

很多常见布局中都将版权、隐私策略、授权许可等相关信息置于页脚中。若此类信息对站点所属的组织或公司非常重要，那么应选择这种通常的做法。

3.3.5 遵守设计流程

White Lily演示了遵守设计流程为我们在完成布局需求时带来的帮助。当然，不同的设计师或设计团队中都会有不同的设计流程，这些设计流程很有可能看起来截然不同。

但无论其他人的设计流程是怎样的，White Lily的结果却非常令人满意。通过首先确定作品的主题并分析其将要包含的内容，Jens Kristensen很容易地能够沿着一条清晰的道路走下去，直至达到最终目标：实现一个引人注目的、让用户满意并理解的布局。

3.4 prêt-à-porter

Minz Meyer，设计师

www.csszengarden.com/037

在垂直的世界中使用水平布局

新设计师们最常问到的一个问题就是，“到哪去找到灵感呢？”很多人建议新手去一些地点进行观察。例如壮美、多彩、富有活力的大自然就常常成为灵感的发源地。

另外一个灵感的发源地就是人的性格和外貌。人的外形总是会在艺术中占有相当的地位。美术专业的学生都会在人体上花费很多时间——学习如何把握人体的轮廓、面孔的线条以及不同人之间截然不同的气质。Minz Meyer的prêt-à-porter就将大自然和人体完美地结合了起来，加上其一反常态的布局，更让整个作品显得独具匠心。

3.4.1 从印刷作品中找到3.4.1 灵感

已经从业一段时间的Web设计师们经常从前辈们口中听到这样的说法，“Web设计与印刷作品不同”。虽然这句话的正确性毋庸置疑，Web设计时不能生搬硬套印刷作品的理论，但我们却仍能够借鉴并从印刷作品中找到Web设计的灵感。prêt-à-porter正是在这一点上走到了我们的前面。

但这里，prêt-à-porter的灵感并不是来自某件印刷作品，而是来自一件描述印刷作品的印刷作品（图3-4-1）。

图3-4-1 启发prêt-à-porter设计灵感的若干页宣传手册

在Meyer的一本介绍某印刷商店商品的小册子中，提到了一种用图像和文字创造视觉平衡的方法。在原设计的左边，垂直地排布了一系列的照片（图片来自该手册，仅起到说明作用），照片中的各个女性面孔都被涂抹上不同颜色的花纹。在右面部分，图像和文字混在一起，文字用德语书写，含义为“失去颜色”。通过色彩艳丽的图像以及清晰的文字，这份介绍手册起到了很好的宣传作用——人们自然可以确信该商店不会弄错印刷作品的颜色。

特别需要注意的是，原宣传手册是横向设计的。于是最让人着迷，同样也是最具有挑战性的一点就出现在了这里——如何在Web中实现这种水平延展的作品。

打破常规

虽然横向设计在印刷作品中广泛应用，效果也非常不错，但Web设计师们通常却都避免在Web设计中使用这种方法。这样做的原因大都基于可用性考虑。水平设计的作品通常都会在浏览器底部显示出滚动条，浏览者则需要水平地滚动页面以得到更多内容。由于大多数用户在获取信息时都倾向于尽可能少地进行操作，所以这样的设计往往会导致可用性问题。特别是对于那些肢体不便的残障人士来说，水平移动滚动条将显得更为困难¹。这导致的结果就是，除了某些特殊设计，例如用于试验的作品，或者——很遗憾，设计师错误地估计了浏览者屏幕分辨率而设计出的作品，大多数Web设计师都会尽可能地避免横向设计。

注释：¹ 设想用户使用的是带滚轮的三键鼠标：在垂直设计的页面中，只要滚动鼠标（一个操作）即可看到页面的其他内容；而对于横向设计的作品，则需要将指针移动到水平滚动条上，按住鼠标左键，然后进行水平拖拽（三个操作）。——译者注

较早打破该常规的网站是1998年发布的“Circle of Friends”，该社区网站致力于帮助那些脊髓受到损伤的群体，并向那些对此兴趣的人介绍相关信息。之所以该组织的倡导者Christopher Reeve（已故）决定让页面横向滚动，是因为很多脊髓受到损伤的人只能以这样的方式感知世界。在当时，这是个革命性的设计，创意的灵感显然来自人的体验（图3-4-2）。

图3-4-2 Circle of Friends网站，于1998年上线但现在已经关闭。该网站的横向设计打破了Web设计中的常规

怀着希望横向设计能够对Web产生足够影响的美好愿望，Meyer决定接受这个挑战，尝试创建出该印刷设计的Web版本，用CSS的力量证明这种设计在Web中同样可取。

3.4.2 水平带来的挑战

在用CSS实现这个高度受到限制的作品时，最大的“拦路虎”就是不可避免的浏览器兼容性问题。为了让作品在各种操作系统上的各个浏览器中都可以正常使用且足够美观，我们需要使用一些技巧性的处理方法。

1.考虑固定定位

由于该女性图片非常引人注目，所以Meyer希望让该图片始终固定在作品的同样位置上，并让文字部分进行水平滚动。这样的设计让作品变得对Web极为友好，而这在传统的印刷作品中是不可能实现的。

虽然CSS给设计师提供了很多种用来实现背景图像的方法，但我们却不能简单地将该女性图片作为背景应用到body元素上。因为这将导致用户滚动页面时，其他部分的文本覆盖到该图片之上，既削弱了图片表达的含义，也降低了文本的可读性。

一种解决该问题的办法就是使用固定（fixed）定位的div，并将图片作为背景应用于其上。无论是哪个元素，只要其应用了固定定位，那么它在页面中的位置都将始终不变。这样，该元素也不会随着页面其他元素的滚动而改变自身的位置。于是我们完全可以用下面的选择器来实现这个功能：

div#static-image {

　background-image: url(bg_face.jpg);

　background-repeat: no-repeat;

　background-position: left bottom;

　position: fixed;

　left: 0;

　bottom: 0;

　height: 594px;

　width: 205px;

　z-index: 2;

}

若浏览器完全兼容CSS标准，那么position为fixed的这个div将永远停留在同一位置上，且页面中的其他元素定位于其下方，被其遮盖（图3-4-3）。

图3-4-3 在支持固定定位的Mozilla浏览器中，即使滚动页面，也能保证该图像的位置始终固定，而文本在滚动时将被图像覆盖

Tip

可以使用z-index属性设置固定元素的前后位置关系。高z-index的元素将覆盖低z-index元素。

Note

尽管1998年发布的CSS2标准中就已经定义了position属性的fixed值，但某些浏览器仍不能支持该属性——其中最明显的就是微软公司的IE。所以，虽然在更加兼容标准的浏览器中这条规则能够正常工作，但在IE中该图像却会滚动到页面可见区域之外，也就破坏了作品的效果。

2.考虑浏览器缺陷

在解决跨浏览器问题时，我们经常先设计好页面在理论中的样子，然后考虑在出于一些原因不能支持某种效果的浏览器中将页面“降级”处理。为了实现这个目的，我们可以为不同浏览器创建不同的页面，然后用JavaScript分辨出浏览器类型。但有些人却质疑这种解决方案的有效性——很多人在浏览器设置中禁用了JavaScript。

对于prêt-à-porter的情况，考虑到IE浏览器中该人脸图像将随页面滚动到可见区域之外，我们需要为其创建一种替代的设计，让作品看起来同样美观且能够平滑呈现。在这种情况下，Meyer用一个看起来仍可接受的替代设计来解决IE中遇到的问题。

IE不仅不支持固定定位，还不支持子选择器（子选择器用来选择给定元素的某个特定的直接子元素）。子选择器的语法是一个右尖括号（>）。这样，下面的这个选择器：

p>strong

表示只有在段落元素（p）中直接出现的strong元素才能够应用接下来要声明的CSS样式。

由于IE不支持固定定位或子选择器，我们可以借此将IE和其他浏览器区分开来，让其他浏览器尝试应用理想情况下的CSS规则，而让IE使用另一种规则：

body#css-zen-garden>div#extraDiv2 {

　background-image: url(bg_face.jpg);

　background-repeat: no-repeat;

　background-position: left bottom;

　position: fixed;

　left: 0;

　bottom: 0;

　height: 594px;

　width: 205px;

　z-index: 2;

}

下面这段CSS只适用于无法理解上面这条规则的浏览器（主要是为IE设计）。因为第一段代码中的子选择器声明更加明确专一，所以该规则的优先级也更高，当然前提是浏览器能够正确理解该规则。

div#extraDiv2 {

　background-image: url(bg_face_ie.jpg);

　background-repeat: no-repeat;

　background-position: left bottom;

　position: absolute;

　left: 0;

　bottom: 0;

　height: 600px;

　width: 265px;

}

即使在IE 6.0中本应固定的图像滚动到了可见区域之外，作品仍足够吸引人，效果完全可以接受（图3-4-4）。

图3-4-4 在IE 6.0的替代布局中，虽然图像滚动至可见区域之外，但作品的完整性仍没有受到影响

3.考虑Opera

prêt-à-porter在设计中遇到的另外一个问题就是作品在Opera Software公司的Opera浏览器中的兼容性。即使浏览器开发者非常重视实现标准（Opera就是如此），但由于很多不同的原因，其对标准的实现并不总是完美的。

在低于7.5版本的Opera浏览器不会为prêt-à-porter显示水平滚动条。显然，在此类浏览器中该页面根本无法使用（图3-4-5）。

图3-4-5 在Opera 7.0中浏览prêt-à-porter。低于7.5版本的Opera浏览器不会显示水平滚动条，让作品变得毫无用处

幸运的是，Opera在新版本中修复了这个问题，作品不但能够正常显示，而且显示得相当完美。固定定位的图像位置始终保持不变，与其他支持fixed属性的浏览器一样。

3.4.3 学到的东西

从找到灵感到将该灵感实现为完整的作品是一个过程，对于每个人来说，这个过程都如同最终的结果一样独一无二。这个由横向印刷作品带来的灵感也同时给Meyer带来了希望和挑战。通过使用一些巧妙的方法，Meyer最终完成了这个极其引人注目的漂亮作品。作品在教会我们如何打破常规地思考的同时，也演示了如何有效地将想法付诸实践。

3.5 CS(S) Monk

Cedric Savarese，设计师

www.csszengarden.com/070

含义丰富的定位，充分理解网格

是谁说作品一定要事先做好详细周密计划的？设计师Cedric Savarese正是通过在Photoshop中不断尝试，才最终完成了他的CS(S) Monk作品。这种从试验开始的方法非常灵活，当新的灵感出现时，设计师即可立即推翻或调整旧的设计。

Savarese让页首部分成为了作品的焦点，其他部分均环绕在其周围。在尝试过数百种不同字体之后， Savarese终于找到了最符合作品主题的一种。为了更加强调作品中“禅”的意味，Savarese还特地在页面中添加了花朵图案作为装饰。令人愉悦的红色和灰色基调也让作品魅力十足。

3.5.1 元素的位置以及其带3.5.1 来的含义

CS(S) Monk作品中最具有支配性的僧侣图像占据了页面的焦点位置——左上角。作品中的第一个元素的地位最为重要，它也被放在了最显眼的位置。

考虑一个固定大小的平面画布，例如一张纸，若在其水平和垂直方向都一分为二，那么将得到四个象限。西方文字的布局顺序是从左到右，从上至下。因此，浏览者一般都会无意中按照这个顺序来区分四个象限中内容的重要性。

你是否曾有过这样的疑问——为什么这么多的网站都把LOGO置于页面的左上角呢？原因就在于浏览者的目光一般都会首先移动到这里。将某个元素置于页面的左上部将毫无疑问地吸引住更多的关注，所以这里也自然成了LOGO的理想位置（图3-5-1）。

图3-5-1 左上象限

页面的右上部分同样非常重要（图3-5-2）——在任何页面中，无需滚动即可立即看到的区域都是最重要的部分。将某个元素置于页面的右上角意味着该元素的重要性略逊于左上角的元素，但仍远高于页面其他位置中的元素。

图3-5-2 右上象限

在大多数页面中，底部的两个象限并不是那么的重要（图3-5-3）。有些设计师在该处添加一条冗余的导航链接，还有些设计师只是简单地将版权条款置于此处，并没有任何别的修饰。在传统的印刷作品中，底部的元素将会让人觉得其上的元素位置有所升高、甚至有漂浮的感觉。印刷作品中很容易通过这种简单的布局营造出三维的空间效果，但在Web页面中，底部的元素却无法营造出同样的效果，甚至会完全被用户忽略。

图3-5-3 左下和右下象限

页面底部的常见用途就是放置一些非必要的内容。对于那些没有足够层次性的链接，或是指向本页或网站其他页面的导航等，这里就是其最好的归宿。若是用户没看到这部分内容，也没什么大不了的——页面其他位置也有同样的实现。但若是用户有幸注意到了，那么这些内容也能够提供一些相当有价值的额外功能，帮助用户理解站点的结构。

3.5.2 网格

网格是一种重要的布局工具，但其呆板的样式往往给人过于严谨的感觉。因为在数学中，网格只不过是一系列相交线分割出的大小一致且极具逻辑性的方框而已。这些线条和方框能够在随后添加设计元素时起到辅助作用。若在布局中严格依照网格，元素的比例和间距将变得更为协调统一，虽然这也可能让作品显得过于规整、缺乏创造性（图3-5-4）。

图3-5-4 基于网格的不同布局排列

经典的表格布局作品大都在无意中演示了过度结构化的网格所带来的限制——单元格中的元素别无选择，只能被束缚于其中。若想实现重叠效果，则需要相邻单元格的辅助来显示一部分效果。通常来讲，唯一能够打破网格限制的方法就是将图像切割成小片，然后再用网格中的网格——也就是复杂的嵌套表格——将其再次拼接起来。

而CSS却能够以非网格的形式对元素进行更为精确优雅的控制。对于一个基于网格结构布局的作品来说，难免会有一些元素需要摆脱网格的限制，以更加自由灵活的方式显示在页面中。CSS定位模型即可在这种情况下给元素以充分的自由，将元素布局在其容器之外，或是页面中的任何位置上。

3.5.3 创建网格

当然，超越网格结构的前提是创建网格。若以网格划分CS(S) Monk，则页首部分将被分成三块，主要内容区域将被分为两栏。

1.页首

基于各个元素间相对重要性的高低，页首部分可分为三个不同的区域：僧侣图像、禅意花园的标题以及#preamble中的文字（该作品将这部分内容从常规文档流中提取出来，并置于页首）。

但若是深入研究一下CS(S) Monk页首部分的图片构成，就会发现上面提到的两个部分——僧侣图像和禅意花园标题被合并成了一张图片。虽然从视觉结构上来讲二者应该分属不同的部分，但为了方便CSS实现，仍将其看作一个整体。这是个Web设计中的惯例——为了方便随后的编码，原始图像的图层需要在保存前被合并（图3-5-5）。

图3-5-5 僧侣图像和禅意花园标题被合并成一张图片

1. 内容区域

虽然CS(S) Monk的主题内容为居中的单栏布局，但每一节的内容和标题都用不同外边距区分开来，看上去就像分为两栏一样。图3-5-6用简单的蓝色高亮展示了这两栏在页面中的分布，二者比例匀称，与页面配合得非常好（图3-5-6）。

图3-5-6 正文部分隐含的两栏布局，符合网格布局

左栏的宽度大概为右栏的2/3，即左右宽度比率为2∶3。两栏之间的这种较为精确的比例可以自动划分：当指定好左栏的宽度之后，右栏的宽度就由页面中剩下的空间决定了。2∶3也是个经典的和谐比率¹，这样的分配使作品中的文字韵律十足，显得极为自然，让人愉悦。

注释：¹ 2∶3近似于黄金分割比率0.618。——译者注

若想了解更多网格设计的知识，请参考Khoi Vinh的《秩序之美——网页中的网格设计》。

3.5.4 跳出网格的限制

Savarese的CS(S) Monk作品大部分基于网格布局，但仍然恰到好处地让一些元素打破了网格的限制，为作品增色不少。

无论是绝对定位还是相对定位，CSS的定位模型都能让我们游刃有余地实现这样的想法。接下来对这两种定位方式的比较分析将帮助你做出最合理、恰当的选择。

1.绝对定位

理解绝对定位的前提就是理解文档流（document flow）的概念。HTML是线性的——文档中可能首先出现一个h1元素，接下来是一个p元素，随后是个div元素。虽然元素允许嵌套，但若在不应用任何样式的情况下，我们很容易就能看出HTML解释器将从头到尾按顺序解析文档中的元素，并自上向下将元素依次显示在浏览器中（图3-5-7）。

图3-5-7 未应用样式的HTML文档将自上向下线性地显示于浏览器中

而绝对定位则不仅可以将某元素置于页面中的任何位置之上，还能够将其从文档流中移除。绝对定位元素不会影响到文档中的其他元素，其他元素依然会以线性的方式进行布局，就像这个绝对定位元素根本不存在一样（图3-5-8）。绝对定位元素将被呈现于指定的位置，但考虑到页面中显示的其他元素，设计师一般都需要仔细斟酌，以处理元素之间可能出现的相互覆盖问题。

图3-5-8 其他元素忽略了绝对定位元素，就像根本不存在一样

在唯一一种情况下，绝对定位元素也会影响到页面中的其他元素，即当某个元素被包含在该绝对定位元素中，且同样应用了CSS定位时。CSS定位模型将认为该元素的定位是基于其包含块（containing block）的——大多数情况下元素的包含块都是文档的根元素html。但若是在定位元素与文档根元素的层次关系中还存在着另一个定位元素，则子元素的定位将改为基于其父元素进行¹。

注释：¹ 定位元素就将作为其子元素的包含块。——译者注

若想了解更多包含块的知识，请参考CSS规范中的“10 Visual formatting model details”页面（www.w3.org/TR/REC-CSS2/vi-sudet.ht-ml#containing-block-details）。

2.相对定位

相对定位则不会把元素从文档流中移除，而是基于其原位置进行一定的偏移。页面中其他的元素不会占据其偏移后留下的空白空间，就像该元素仍在原位一样（图3-5-9、图3-5-1 0和图3-5-11 ）。

图3-5-9 常规文档流中的元素

图3-5-10 相对定位元素仍将包含在文档流中，其原位置也会继续影响其他元素，但该相对定位元素的新位置将被文档流忽略

图3-5-11 相反，绝对定位元素将不会影响到文档流。该元素的原位置和新位置都将被文档流忽略

若想为某元素应用一定的偏移，那么相对定位将是最好的选择：传统网格布局中的元素可以轻松地摆脱其束缚，移动到网格之外；在其他定位方案难以应用时，相对定位仍可广泛适用。例如，Savarese就用相对定位将那条龙的图案从其原本位置（正文开始处）移动到了页脚的左边。用绝对定位将元素置于页面底部附近要比将其置于顶部困难得多，这时使用相对定位将会更易于实现。

3.5.5 网格布局中的灵活性

除非仔细考虑并能良好把握作品的均衡性，Cedric Savarese使用的这种逐步求精的设计方式将让结果变得极为混乱。丰富的定位、比例知识将能够防止这类问题，或者用网格辅助设计也能达到较为和谐的目的。

3.6 Not So Minimal

Dan Rubin，设计师

www.csszengarden.com/024

处理布局中常见的溢出问题

Not So Minimal的标题让我们产生了这样的疑惑：不想如什么一样的最小化？该作品有一段背后的历史：Dan Rubin向禅意花园提交的第一个作品叫做Grazay，你可以在www.superfluousbanter.org/projects/z engarden/grazay/zengarden-grazay.html访问它。

在Grazay（图3-6-1）中，Rubin有意地选择了较亮的色彩以及常见的字体（FF DIN Condensed和Verdana）。虽然禅意花园了解优秀的最小化设计作品的重要性，但网站建立的主要目的仍是为了反驳CSS只能用来实现最小化设计之类的言论，所以Grazay并不是禅意花园所希望看到的。因此，Rubin随后用一些图片对Grazay进行了润色，最终完成了现在这个作品——Not So Minimal。

图3-6-1 Dan Rubin最初的作品Grazay演示了Not So Minimal的进化过程

Note

此外，在同时使用基于标准设计和CMS时的另一个问题就是，很多CMS系统会生成一些不符合标准的过时标签，主要体现在其内容和表现样式混在一起，例如使用<font>标签等。且CMS系统大都支持用户开发自定义模块，以满足千变万化的需求，开发人员的良莠不齐也可能导致站点离Web标准的要求越来越远。

尽管存在着这些问题，但情况还是在慢慢好转，当前很多CMS系统在生成合法XHTML/CSS代码上都比以前大有改进。Drupal（www.drupal.org）和Mambo （www.mamboserver.com）就是两个流行的开源CMS系统。

3.6.1 内容溢出

CSS布局中最常见的一个难题就是如何应付多变的Web所带来的挑战。更明确一些，问题在于如何在不知道内容多少的情况下在CSS中预先定义容器的长宽。

内容长度不定似乎是Web的天性——页面中的内容可能极少，也可能极丰富。例如对于内容管理系统（Content Management System，CMS）之类的动态网站来说，页面内容既有可能一反常态地短小，也有可能让人难以置信地冗长。

除非CMS程序的开发者直接限制内容的长度——大多数情况下这似乎不现实——任何将要容纳可变长度内容的区域都要经过长短不一的文字的测试。与图像相比，文本内容的行为更加难以预测，因为图像的尺寸固定且能够预先了解，即不可缩放。但这也并不是硬性的规定——CMS中的某篇文章中可以插入多张图像，或者程序没有规定图像的高度，抑或其他的什么原因等都会导致页面中图像的大小不可预知。

目前，大多数浏览器均支持缩放页面的文本字号，很多视力不佳的人们也都依赖于这个功能。字号放大之后同样有可能导致类似的文本重叠问题。理论上，能够解决可变内容长度问题的主要内容区域也可以很好地处理由字号变大带来的问题，但类似导航链接之类的小块文字区域却往往难逃厄运。保证页面能够在150%甚至更高比率的文字大小设定中正常显示并不是杞人忧天——很多用户正是用这种字号浏览站点的。

无论如何，我们必然会遇到内容区域溢出的问题，或者是水平方向，或者是垂直方向。一些挑剔的用户往往对内容的重叠或某个包含大量内容区域的显示错位表现得极为苛刻。在实际设计中，最常见的两种内容溢出主要发生于两种情况中：绝对定位元素中内容过多，浮动元素尺寸超过其可容纳区域。

3.6.2 浮动导致的内容溢出

从技术角度讲，float（浮动）属性并不是用来布局的。CSS引入浮动的本意是让文本能够环绕在其中内嵌的其他元素周围，而绝不是为了页面布局。但即便如此，我们也不得不继续使用浮动，原因很简单——其他任何方法都没有“清除（clear）”功能，我们别无选择。

以最简单的方式描述，clear属性及clear的含义可以被理解为让某一元素不再跟随在另一元素的后面。大多数情况下，绝对定位导致的内容溢出都源于该方案缺少了这种“清除跟随”的功能。

但浮动布局也不是完美的，很多浏览器的缺陷更是让我们在使用浮动时举步维艰。

1.用标签清除浮动

若要在布局中使用浮动，则HTML中至少要有两个元素：一个应用浮动，另一个则用来清除浮动。例如，页面中可能有两个div分别浮动在左右两侧，这时我们还必须要引入第三个元素来清除浮动。我们可以用现有元素顺便清除浮动，例如用紧随其后的p元素清除前面h3元素的浮动属性。

但有时我们却不得不额外引入一个“罪恶”的空元素来完成清除浮动的重任。若这种情况的确无法避免，我们推荐使用“全能”的空白div元素，类似如下代码：

<div class="clear"></div>

在该CSS Class中即可定义clear属性。虽然在HTML中添加的这个无意义标签似乎有些丑陋，但我们已经尽力了。

2.精确控制浮动元素

若在一个装满了水的容器中再撒入一把沙子，会发生什么情况？自然，容器装不下这么多东西，一部分水将溢到容器外面。

在使用浮动时也会受到类似的限制，最常见的就是水平方向溢出。若两个50%屏幕宽度的浮动元素并排放置于页面上，且某个元素还有着100px的外边距，那么第二个就会被挤出去，最终排布在第一个的下面。考虑到这些，我们必须预先精确计算好浮动元素的宽度。

但对于width和height属性，Windows下的IE却并没有遵从CSS规范中的建议。在IE中最有可能发生的就是元素的实际宽度大于其CSS width属性所指定的宽度。这将导致两种可能的结果：一种是内容的布局受到影响，另一种是容器的宽度仍保持不变，但其中的部分内容却显示在容器之外。但不管怎样，即使内容越过了包含它的容器边界，甚至与其他元素重叠在一起，但浮动效果仍不会受到影响。

Tip

Eric Meyer写过很多清除浮动的相关文章。不要错过“Containing Floats”（www. complexspiral.com/publications/containin g-floats）这篇文章。

Tip

还有一种无需专门元素的清除浮动方法。该方法需要使用一些比较巧妙的hack来实现跨浏览器兼容，请参考“How to Clear Floats Without Structural Markup”www.positioniseverything.net/easyclearin g.html）。

此外，IE还会在必要时自动扩张元素的宽度。哪怕是某个浮动元素的实际宽度只比其预期宽度多1个像素，仍会将其他的浮动元素挤出去（图3-6-2）。我们可以考虑用如下几种方法来解决这个问题。

图3-6-2 若几个浮动元素的宽度总合大于其容器的宽度，则一个或几个元素将被挤到其他元素的下方

•增大区域的宽度

若能够适当增大浮动元素的容器宽度，那么通常这个问题也就不复存在了。虽然谈不上最理想的解决方案，但却是应该最先考虑的，因为这种方法的实现过程相对简单。

•限制内容宽度并注意斜体

如果能够绝对保证浮动元素中的内容不会造成水平溢出，那么也就自然解决了这个问题。但这种方法通常却并不可行，因为若在最初设计时其中内容不多的话，我们很难在一开始就发现这个问题。

一个更加难缠的问题就是，即使内容的宽度完全合理，仍旧无法避免出现内容溢出。这个问题特别常见于Windows平台的IE浏览器中。如果正被这个问题所困扰，且浮动元素中的某些文字是以斜体显示的，那么可以暂时取消斜体效果，看看是否解决了问题。IE中的斜体文字非常有可能导致水平溢出，这正是问题的元凶。虽然理论上任何的文本格式都不会影响到布局，但这里事情却的确发生了。

•限制内容溢出

在下一节介绍垂直溢出时，我们将研究overflow属性，但在防止水平溢出时，overflow也能助上一臂之力。这种用overflow进行限制的方式并不是那么优雅，所以在使用时要倍加小心。

3.6.3 绝对定位导致的内容溢出

绝对定位中遇到最多的问题就是垂直方向的内容溢出。但也有一个例外——若绝对定位元素的预定宽度不足以容下其子元素，也会发生水平内容溢出（图3-6-3）

图3-6-3 对于100像素宽的容器来说，150像素宽的#linkList子元素显得太大，将导致水平溢出

垂直溢出

内容垂直方向溢出的问题更加常见。原因在于，绝对定位元素不像浮动元素那样能够被“清除”。为元素指定位置，也就意味着将其从文档流中移除，该绝对定位元素自然无法再影响到其周围的元素了，它的宽度并不能限制其中子元素的宽度。

在处理页脚时我们经常会遇到这个问题——某个绝对定位的栏的高度可能会随内容的增多而变大，直至变成页面中最高的一栏，最终覆盖到页脚区域之上，甚至更往下（图3-6-4）。很不幸的是，对于这种情况，我们并没有什么足够安全的解决方案，只能给出一些权宜之计。

图3-6-4 若内容区域更短一些，Not So Minimal的左侧导航条将覆盖在页脚上

•用浮动代替绝对布局

最有效的方案就是用浮动来代替绝对布局，并使用其“清除浮动”特性。虽然这种方法并不总是管用，但如果有可能的话，还是非常值得我们去尝试一下。

•在设计中尝试避免该问题

另外，我们也可以尝试让绝对定位元素在垂直方向上能够无限伸展。若某元素可能覆盖页脚，那么干脆为页脚添加一定的外边距，给该元素让出足够的空间。这样若是这个绝对定位元素下面没有任何其他元素的话，覆盖自然无从谈起，问题也得到了解决。

•限制溢出

使用CSS中内建的自动溢出控制功能要比强制控制内容长度好得多。overflow正是为此而设计的，但它却并不是你所期望的“银弹”。若你将某元素的高度固定为150px，且将其overflow属性设置为auto的话，那么若其中内容高度超过了150px，超过部分将被截去并显示出滚动条。

太多的滚动条很快会让用户对页面失去兴趣。为了避免这个麻烦，我们可以将overflow属性设置为hidden，但在移除滚动条的同时也会永久性地隐藏超过容器高度的那部分内容。大多数情况下都不应该这样做，因为隐藏的内容对于浏览者来说将变得毫无意义，但在某些少见的情况下，这种表现或许正是我们所期望的。

•使用脚本

如果不介意的话，可以使用一小段JavaScript来辅助CSS布局。禅意花园的贡献者之一Shaun Inman给出了一段非常有用的脚本，用来“清除”绝对定位元素，其行为与清除浮动非常类似。这段脚本可以在他的“Absolute Clearance ”（www.shauninman.com / plete/2004/07/absolute_clearance.php）一文中找到。

•用em而不是px作为长度单位

这个技巧仅适用于由用户增大字号所导致的内容溢出中，而对于因内容长度可变造成的内容溢出，这种方法却无能为力。用px作为单位进行绝对定位将能够最精确地控制布局，但同时也丧失了布局的灵活性——一旦给定了元素的位置，那么它将始终固定在原地。但若是用em作为left、top等属性的单位，元素的位置将变得略加灵活一些——这个位置会根据用户选择不同的字号而相应地改变。若是重叠在一起的若干元素都是用em单位，那么任意一个位置的变化都将让其余元素的位置随之调整。虽然定位不是那么精确，但很多时候这种方法却相当好用。

3.6.4 设计时考虑溢出

由于右面的正文区域较长，所以Not So Minimal的左侧导航条并没有受到内容溢出的影响。但是随着禅意花园的不断壮大，各种不同的页面可能会让导航条越来越长，最终超过内容的高度。这时，类似图3-6-4所示的覆盖问题将不会再像现在这样鲜有出现，而是会变得越来越严重，设计师也不得不需要更加周全的考虑。

虽然设计方案不应该由技术实现主导，但对于大型网站来说，内容溢出确实是个棘手的问题。若能在设计时就从根本上避免了这个问题，那么上述几个远远称不上完美的权宜之计也能保证不会让我们在编码实现阶段感到捉襟见肘。