第5章 页面布局

本章,我们来学习多栏页面布局。很多网站为了在第一屏尽可能多地显示信息,都采用了多栏布局。这里所说的“第一屏”就是用户无须滚动就能看到的页面区域,相当于传统报纸行业所说的“折痕之上”的版面。一般来说,两栏、三栏,甚至四栏布局都很常见。但无论几栏,每个页面都要涉及一些关键技术和指导思想,这些内容本章都将介绍。

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

我会把上述经典技术和新技术的优缺点都摆出来,还会告诉大家对那些老版本浏览器(当然主要指IE8及更早版本),有什么后备手段和“腻子脚本”(polyfill)可以使用。这些都是你选择技术时需要考虑的。好吧,闲话少说,就从布局的基本概念开始讲吧。