web页面布局

浏览数：21 / 时间：2015年06月09日

随着Web上不同布局技术的数量激增，似乎每个CSS都用自己的技术创建多列的布局，而且新的CSS开发人员常常使用一种技术却不真正了解它的工作原理。这种进行css布局的“黑盒”方式可能给会迅速地得到想要的结果，但是最终会阻碍开发人员理解这种语言。

所有css布局技术都依赖于三个基本概念：定位、浮动和空白边操纵。不同的技术其实没有本质的差异，而且如果理解了核心概念，那么创建自己的布局是相当容易的。

接下来，列举以下几点：

1、让设计在页面中水平居中；

2、创建两列和三列的基于浮动的布局；

3、创建固定宽度、流体和弹性布局；

4、将列拉长到整个可用空间的高度。

7.1 让设计居中

长文本行难以阅读。随着现代显示器的尺寸越来越大，屏幕可读性问题变得越来越重要。缓解这个问题的一种方法是让设计居中。居中的设计只占据屏幕的一部分，而不是横跨屏幕的整个宽度，这样就会创建比较短的容易阅读的行。

居中的设计目前非常时髦，所以如何在css中让设计居中是大多数开发人员首先要学习的主题之一。让设计居中有两个基本方法：一个方法使用自动空白边，另一个方法使用定位和负值的空白边。

7.1.1 使用自动空白边让设计居中

假设有一个典型的布局，希望让其中的容器div在屏幕上水平居中：

<body>

</div>

</body>

为此，只需定义容器div的宽度，然后将水平空白边设置为auto：

#wrapper{

width: 720px;

margin: 0 auto;

}

在这个示例中，我决定以像素为单位指定容器div的宽度，让它适合800*600分辨率的屏幕。但是，也可以将宽度设置为主体的百分数，或者使用em相对于文本字号设置宽度。

这在所有现代浏览器中都是有效的。但是，怪异模式中的IE5.X和IE6不支持自动空白边。幸运的是，IE将text-align:center误解为让所有东西居中，而不只是文本。可以利用这一点，方法是让主体标签中的所有东西居中，包括容器div，然后将容器的内容重新对准左边：

body{

text-align: center;

}

#wrapper{

width: 720px;

margin:0 auto;

text-align: left;

}

以这种方式使用text-align属性是一种招数，但是这个招数是无害的，对代码美欧严重的影响。容器现在在IE以及比较符合标准的浏览器中都会居中。

为了让这个方法在所有浏览器中都能够顺利的工作，需要做最后一件事情。在Netscape 6 中，当浏览器窗口的宽度减少到小于容器的宽度时，容器的左边会跑到屏幕的外边，就无法访问它了。为了防止这种现象，需要将主体元素的最小宽度设置为等于或略大于容器元素的宽度：

body {

text-align: center;

min-width: 760px;

}

#wrapper {

width: 720px;

margin:0 auto;

text-align: left;

}

图7-1 使用自动空白边让设计居中

现在，如果试图将窗口的宽度减少到小于容器div的宽度，就会出现滚动条，使用户能够访问所有内容。

7.1.2 使用定位和负值空白边让设计居中

到目前为止，使用自动空白边进行居中的方法是最常用的，但是它需要用一个招数来满足IE5.X的要求。它还要求对两个元素而不只是一个元素应用样式。因此，有些人喜欢使用定位和负值空白边来代替这种方法。

与前面一样，首先定义容器的宽度。然后将容器的position属性设置为relative，将left属性设置为50%。这会把容器的左边缘定位在页面的中间。

#wrapper{

width: 720px;

position: relative;

left: 50%;

}

但是，并不希望让容器的左边缘居中，而是希望让容器的中间居中。实现的方法是对容器的左边应用一个负值的空白边，宽度等于容器宽度的一半儿，这会把容器向左边移动它的宽度的一半，从而让它在屏幕上居中：

#wrapper{

width: 720px;

position: relative;

left: 50%;

margin-left: -360px;

}

选择使用哪种居中技术是个人喜好问题。但是，同时掌握多种技术总是有好处的，因为不知道什么时候某种技术正好合适。

7.2 基于浮动的布局

用css进行布局有几种不同的方式，包括绝对定位和使用负值空白边。我发现基于浮动的布局是最容易使用的方法。顾名思义，在基于浮动的布局中，只需设置希望定位的元素的宽度，然后将他们向左或向右浮动。

因为浮动的元素不再占据文档流中的任何空间，他们就不再对包围他们的块框产生任何影响。为了解决这个问题，需要对布局中各个点上的浮动元素进行清理。非常常见的做法是，不对元素进行连续地浮动和清理，而是浮动几乎所有东西，然后在整个文档的“战略点”（比如页脚）上进行一次或两次清理。

7.2.1 两列的浮动布局

要想使用浮动创建简单的两列布局，首先需要有一个基本的(X)HTML框架。在下面的示例中，(X)HTML由品牌区域、内容区域、主导航区域和最后的页脚组成。整个设计包围在一个容器div中，这个div使用前面介绍的方法之一进行水平居中：

...

</div>

...

</div>

...

</div>

...

</div>

这个设计的主导航区域将位于页面的左边，内容位于右边。但是，为了易用性和可访问性，在源代码中将内容区域放在导航的前面。首先，主内容是页面上最重要的东西，所以在文档中应该先出现。其次，这样可以方便屏幕阅读器用户，他们用不着经过可能很长的链接列表才找到内容部分。

在创建基于浮动的布局时，一般将两列都向左浮动，然后使用空白边或填充在两列之间创建一个隔离带。在使用这种方法时，列在可用空间内包得很紧，没有喘息的空间。如果浏览器表现良好的话，那么这不是问题：但是差劲的浏览器会打乱紧密的布局，迫使一列退到另一列的下面。

在IE上就会发生这种情况，因为IE/Win考虑元素内容的尺寸，而不是元素本身的尺寸。在符合标准的浏览器中，如果元素的内容太大，它只会超出框之外。但是，在IE/Win上，如果元素的内容太大，整个元素就会扩展。如果这发生在非常紧密的布局中，那么就没有足够的空间可以让元素并排出现，浮动元素之一就会退到下面去。其他IE bug（比如3像素文本偏移bug和双空白边浮动bug）也会导致浮动元素下降。

为了防止发生这种情况，需要避免浮动布局在包含它们的元素中太挤。可以不使用水平空白边或填充来建立隔离带，而是将一个元素向左浮动，另一个元素向右浮动，从而创建视觉上的隔离。如果一个元素的尺寸意外地增加了几个像素，那么它不会立刻占满水平空间并下降，而只是扩展到视觉隔离带中。

图7-2 使用浮动创建两列布局

实现这个布局的CSS非常简单。只需为每个列设置想要的宽度，然后将导航向左浮动，将内容向右浮动：

#content {

width: 520px;

float: right;

}

#mainNav {

width: 180px;

float: left;

}

然后，为了确保页脚正确地定位在这两个浮动元素的下面，需要清理页脚：

#footer {

clear: both;

}

基本的布局现在完成了。还需要做一些小调整以便让布局更有条理。首先，导航区域中的内容一直顶到容器的边缘上，还不太好看，需要留出点儿空间。可以直接在导航元素上添加水平填充，但是这会调用IE5.x专有的框模型。为了避免这种情况，将水平填充添加到导航区域的内容上：

#mainNav {

padding: 20px 0;

}

#mainNav li {

padding: 0 20px;

}

内容区域的右边也一直顶到容器的右边缘上，也需要留出点儿空间。同样，并不把填充直接应用到元素上，而是把填充应用到内容上，从而避免处理IE的框模型问题：

#content h1, #content h2, #content p {

padding-right: 20px;

}

现在完成了想要的效果：一个简单的两列css布局（见图7-3）：

7.2.2 三列的浮动布局

创建三列布局所需的HTML与两列布局的HTML非常相似，唯一的差异是在内容div中添加了两个新的div：一个用于主内容，另一个用于次要内容。

...

</div>

...

</div>

可以使用与两列布局技术相同的css，在已经浮动的内容div中，将主内容向左浮动，将次要内容向右浮动（见图7-4）。这本质上就是将内容分成两列，从而形成三列的效果。

图7-4 通过将内容列分为两列，形成三列布局

与前面一样，所用的css非常简单。只需设置想要的宽度，然后将主内容向左浮动，将次要内容向右浮动：

#mainContent {

width: 320px;

float: left;

}

#secondaryContent {

width: 180px;

float: right;

}

可以将填充从内容元素上去掉，并且将它应用于次要内容的内容上，从而让布局显得更有条理：

#secondaryContent h1, #secondaryContent h2,

#secondaryContent p {

padding: 0 20px;

}

这样就形成了一个的三列布局

7.3 固定宽度、流体和弹性布局

到目前为止，所有示例都使用以像素为单位定义的宽度。这种布局类型称为固定宽度的布局，由于它是刚性的，有时候也称为“冰布局”。固定宽度的布局非常常见，因为它们使开发人员对布局和定位有更大的控制能力。如果将设计的宽度设置为720像素，它就总是720像素宽。这样的话，如果想让一个品牌图像横跨设计的顶部，那么你知道这个图像需要宽720像素。知道每个元素的精确宽度，就能够对它们进行精确地布局，而且知道所有东西在什么地方。这样的可预测性使固定宽度的布局迄今为止最常用的布局方法。

但是，固定宽度的布局有缺点。首先，因为它们是固定的，所以无论窗口的尺寸有多大，它们的尺寸总是不变。因此，它们无法充分利用可用空间。在高分辨率的屏幕上，为800*600分辨率创建的设计会缩小并且出现在屏幕的中间。反之，为1024*768分辨率创建的设计在低分辨率的屏幕上会导致水平滚动。随着屏幕尺寸范围越来越大，固定宽度设计的缺点越来越明显了。

固定宽度设计的另一个问题涉及行长和文本易读性。固定宽度的布局对于浏览器默认文本字号往往是合适的。但是，只要将文本字号增加几级，边栏就会挤满空间并且行长太短，阅读起来不舒服。

为了解决这些问题，可以使用流体布局或弹性布局替代固定宽度的布局。

7.3.1 流体布局

在使用流体布局时，尺寸是用百分数而不是像素设置的。这使流体布局能够相对于浏览器窗口进行伸缩。随着浏览器窗口变大，列变宽。相反，随着窗口变小，列的宽度减小。流体布局可以非常高效地使用空间，最好的流体布局甚至不会引起用户的注意。

但是，流体布局也不是没有问题的。在窗口宽度小的时候，行变得非常窄，很难阅读。在多列布局中尤其如此。因此，有必要添加以像素或em为单位的min-width，从而防止布局变得太窄。

与之相反，如果设计跨浏览器窗口的整个宽度，那么行就变得太长，也很难阅读。可以采取几个措施来避免这个问题。首先，不要跨域整个宽度，而是让容器只跨越宽度的一个百分比，比如85%，还可以考虑用百分数设置填充和空白边。这样的话，填充和空白边的宽度将随着窗口尺寸而变，防止列太快地变得过宽。最后，对于非常严重的情况，也可以选择以像素设置容器的最大宽度，以防止内容在大显示器上变得极宽。

注意，Windows上的IE 5.x错误地相对于元素的宽度（而不是父元素的宽度）来计算填充。以百分数设置填充会在这些浏览器中产生不一致的结果。

可以使用这些技术将前面的固定宽度的三列布局转换为流体三列布局。首先，将容器宽度设置为窗口总宽度的百分数。在这个示例中，我选择85%，因为这会在一定的屏幕尺寸范围中产生比较好的效果。接下来，将导航和内容区域的宽度设置为容器宽度的百分数。经过几次尝试之后发现，将导航区域设置为23%、将内容区域设置为75%会产生比较好的效果。这在导航和内容区域之间留出2%的视觉隔离带，这可以防止任何舍入错误和宽度差错破坏布局：

#wrapper {

width: 85%;

}

#mainNav {

width: 23%;

float: left;

}

#content {

width: 75%;

float: right;

}

然后需要设置内容区域中列的宽度。这需要点儿技巧，因为内容div的宽度基于内容元素的宽度，而不是整个容器。如果希望secondaryContent的宽度与主导航相同，那么需要计算出容器宽度的23%是内容区域宽度的百分之多少。将23（导航宽度）除以75（内容区域的宽度），再乘以100，结果是大约31%。希望两个内容列之间的隔离带宽度与导航和内容区域之间的隔离带相同。使用同样的方法计算出大约3%，这意味着主内容区域的宽度应该是66%。

这产生一个最适合1024*768分辨率的流体布局，但是在更大和更小的屏幕分辨率上阅读起来也比较合适。

#mainContent {

width: 66%;

float: left;

}

#secondaryContent {

width: 31%;

float: right;

}

图7-6 三列流体布局在800*600、1024*768和1152*900屏幕分辨率上的效果

因为这个布局会恰当地伸缩，所以不需要添加max-width属性。但是，对于小尺寸，内容会太窄，所以可以在容器元素上设置最小宽度为720像素。

7.3.2 弹性布局

虽然流体布局可以充分利用可用空间，但是在大分辨率显示器上行仍然会过长，让用户不舒服。相反，在窄窗口中或者在增加文本字号时，行会变得非常短，内容很零碎。对于这个问题，弹性布局可能是一种解决方案。

弹性布局相对于字号（而不是浏览器宽度）来设置元素的宽度。通过以em为单位设置宽度，可以确保在字号增加时整个布局随之扩大。这可以将行长保持在可阅读的范围，对于视力弱或有认知障碍的人尤其有用。

与其他布局技术一样，弹性布局也有自己的问题。弹性布局的一些问题与固定宽度布局相同，比如不能充分利用可用空间。另外，因为在文本字号增加时整个布局会加大，所以弹性布局会变得比浏览器窗口宽，导致水平滚动条出现。为了防止这种情况，可能需要在主体标签上添加100%的max-width。IE6和更低版本当前不支持max-width，但是Safari和Firefox等符合标准的浏览器支持它。

创建弹性布局比创建流体布局容易得多，因为所有HTML元素基本上一直出现在相同的相对位置上，它们仅仅是同时随文本字号而增大。将固定宽度布局转换为弹性布局是非常简单的任务。技巧是要设置基字号，让1em大致相当于10px。

大多数浏览器上的默认字号是16像素，10像素大约是16像素的62.5%，所以在主体上将字号设置为62.5%：

body {

font-size: 62.5%;

}

因为在使用默认字号时，1em现在相当于10像素，所以可以将所有像素宽度转换为em宽度，从而将固定宽度布局转换为弹性布局：

#wrapper {

width: 72em;

margin: 0 auto;

text-align: left;

}

#mainNav {