5.1 布局的基本概念

多栏布局有三种基本的实现方案：固定宽度、流动、弹性。

• 固定宽度布局的大小不会随用户调整浏览器窗口大小而变化，一般是900到1100像素宽。其中960像素是最常见的，因为这个宽度适合所有现代显示器，而且能够被16、12、10、8、6、5、4和3整除，不仅容易计算等宽分栏的数量，而且计算结果也能得到没有小数的像素数。

流行的CSS布局框架960 Grid（http://www.960.gs），就是基于960像素宽的网格创建的。

• 流动布局的大小会随用户调整浏览器窗口大小而变化。这种布局能够更好地适应大屏幕，但同时也意味着放弃对页面某些方面的控制，比如随着页面宽度变化，文本行的长度和页面元素之间的位置关系都可能变化。Amazon.com的页面采用的就是流动中栏布局，在各栏宽度加大时通过为内容元素周围添加空白来保持内容居中，而且现在的导航条会在布局变窄到某个宽度时收缩进一个下拉菜单中，从而为内容腾出空间。

今天，越来越多的浏览器都支持CSS媒体查询了。这就让基于浏览器窗口宽度提供不同的CSS样式成为可能。在这种形势下，适应各种屏幕宽度的可变固定布局，正逐步取代流动布局。这种可变的固定布局能够适应最大和最小的屏幕，业界称之为响应式设计。本书第8章将专门介绍响应式设计相关的CSS技术。

• 弹性布局与流动布局类似，在浏览器窗口变宽时，不仅布局变宽，而且所有内容元素的大小也会变化，让人产生一种所有东西都变大了的感觉。到目前为止，我还没见过设计得非常好的弹性布局，主要是因为它太过复杂了。本章不介绍这种布局，而只把笔墨花在固定宽度布局和流动布局上。

下面，我们先来看一看页面的高度和宽度有什么区别。

布局高度与布局宽度

在实际地创建页面布局之前，我想先说说应该怎么看待布局的高度和宽度，因为这两者的控制方法实在太不一样了。

布局高度

多数情况下，布局中结构化元素（乃至任何元素）的高度是不必设定的。事实上，我甚至想告诉你根本不应该给元素设定高度。除非你确实需要这样做，比如在页面中创造一个绝对定位的元素。

为什么正常情况下都应该保持元素height属性的默认值auto不变呢？很简单，只有这样元素才能随自己包含内容的增加而在垂直方向上扩展。这样扩展的元素会把下方的元素向下推，而布局也能随着内容数量的增减而垂直伸缩。假如你明确设定了元素的高度，那么超出的内容要么被剪掉，要么会跑到容器之外——取决于元素overflow属性的设定。

布局宽度

与高度不同，我们需要更精细地控制布局宽度，以便随着浏览器窗口宽度的合理变化，布局能够作出适当的调整，确保文本行不会过长或过短。如果随意给元素添加内边距、边框，或者元素本身过大，导致浮动元素的宽度超过包含元素的布局宽度，那浮动元素就可能“躲”到其他元素下方。

当然啦，即使必须设定栏宽，也不要给包含在其中的内容元素设定宽度，应该让这些内容元素自动扩展到填满栏的宽度。本书前面已经讲过了，这是块级元素的默认行为。简言之，就是让栏宽限制其中内容元素的宽度。

以上这些细节在实际地创建布局时会更容易明白。眼下，只要知道应该控制布局宽度，而让内容决定布局高度这个一般原则就好了。