页面布局学习（一）

页面布局是网站设计中特别重要的一部分，对用户体验尤为重要。我们重点来学习多栏布局。很多网站为例在第一屏尽可能多的显示信息，都会采用多栏布局。这里所说的“第一屏”就是用户无须滚动就能看到的页面区域，相当于传统的报纸行业所说的“折痕之上”的版面。一般来说，两栏、三栏，甚至四栏布局都很常见。但无论几栏，每个页面都会涉及一些关键技术和指导思想。

这里将介绍多栏布局的几种方法。主要介绍“用内部DIV创建浮动的栏”，这是多年来一直被业界用于创建多栏布局的经典技术。另外，随着支持CSS3的浏览器比例越来越高，一些新的布局技术也可以用在大型站点中。今天，我们不仅可以使用box-sizing属性代替内部DIV，也可以使用让元素行为跟表格一样的CSS3的display属性，因此创建流动的全长栏也变得简单多了。

这里会讲到上述经典技术和新技术的优缺点，还会告诉大家对老版浏览器（主要指IE8及更早的版本），有什么后备手段和“腻子脚本”（polyfill）可以使用。这些都是选择技术时需要考虑的。闲话少说，就从布局的基本概念开始讲。

一、布局的基本概念

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

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

2、流动布局的大小会随着用户调整浏览器窗口大小而变化。这种布局能够更好地适应大屏幕，但同时意味着放弃对某些方面的控制，比如随着页面宽度变化，文本行的长度和页面元素之间的位置关系都可能变化。Amazon.com的页面采用的就是流动中栏布局，在各栏宽度加大时通过为内容元素周围添加空白来保持内容居中，而且现在的导航条会在布局变窄到某个宽度时收缩进一个下拉菜单中，从而为内容腾出空间。今天越来越多的浏览器支持CSS媒体查询了，这就让基于浏览器窗口宽度提供不同的CSS样式成为可能。在这种形式下，适应各种屏幕宽度的可变固定布局，正在逐步取代流动布局。这种可变的固定布局能够适应最大和最小的屏幕，业界称为响应式布局。

3、弹性布局与流动布局类似，在浏览器窗口变宽时，不仅布局变宽，而且所有内容元素的大小也会变化，让人产生一种所有东西都变大了的感觉，到目前为止，我还没见过设计得非常好的弹性布局，主要是因为它太过于复杂了。

补充：布局高度与布局宽度——讲这两个不是要讲它们之间的区别，而是因为这两者的控制方法实在是太不一样了，需要理解。

布局高度：通常情况下，布局结构化元素的高度是不必设定的。事实上，甚至可以说不应该给元素设定高度，除非确实需要设定高度，比如在页面中创建一个绝对定位的元素。

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

布局宽度：与高度不同，布局宽度需要精确控制，以便随着浏览器窗口宽度的合理变化，布局能够做出适当调整，确保文本行不会过长或过短。

如果随意给元素添加内边距、边框，或者元素本身过大，导致浮动元素的宽度超过包含元素的布局宽度，那么浮动元素就可能躲到其它元素下方。当然，即使必须设定栏宽，也不要给包含在其中的内容元素设定宽度，应该让这些内容元素自动扩展到填满栏的宽度。这是块级元素的默认行为。简言之就是让栏宽限制其中内容元素的宽度。

最后，要明白一个一般原则：应该控制布局宽度，而让内容决定布局高度。