IT兄弟连 HTML5教程 使用盒子模型设计页面布局

布局所涉及的技术非常很多，足以另写单独的一本书了。在本节中主要介绍网站中最常用的布局方案，包括区块框居中、两列浮动、三列浮动及多列浮动的区块框。

1  居中设计

区块框居中的设计是在网页布局中常用的技术，例如将网页内的主体内容设置为一定的宽度，然后在页面内居中占据屏幕的一部分显示，而不是横跨整个屏幕宽度。这样设计的目的是因为现在的显示器尺寸越来越大，网页的可读性问题就变得越来越重要，因而需要创建比较短的、容易阅读的行。另外，不要让使用分辨率比较低的显示器用户，通过反复拖动浏览器的水平滚动条来查看页面中的每行文本。目前网页的布局几乎都是基于1024 × 768像素的屏幕分辨率来设计页面内容的宽度。例如，将页面显示内容区块框的宽度设置为966像素，代码如下所示：

在上面的代码中，设置页面最外层的容器div水平居中。在CSS中只需要定义容器div的宽度为966像素，然后将容器的左部和右部空白边设置为auto，就会在浏览器中居中。但在没有声明DOCTYPE时，IE浏览器中不支持使用空白边设置容器居中，而是通过在上一层容器中设置样式text-align:center让容器居中，然后再将容器的内容重新对准左边。如图1所示，IE和Firefox显示结果相同。

图1  居中设计

2  设置两列浮动的布局

使用float设置的浮动盒子区块会脱离文档流，也不会占据文档流中的任何空间，所以浮动的盒子区块就不再对包含它们的区块框产生任何影响。另外，在一行内如果有足够空间，则多个设置浮动的盒子就会显示在同一行中。所以使用浮动的盒子区块去创建简单的两列布局，只要同一行有足够空间并将两个盒子都设置为浮动即可。例如，在很多网站中常见的主导航以边条的形式显示在左边、主体内容区域在右边显示的两列，我们将主导航区块框和内容区块框两列设计包含在一个居中容器div中，这个div就使用前面介绍的方法设计为水平居中。代码如下所示：

在上面的代码中非常简单地实现了两列的浮动，只为每一列设置想要的宽度，然后将主导航所在的区块框向左浮动，将内容区块框向右浮动，如图2所示。

图2  两列浮动设计

3  设置三列浮动的布局

要创建三列的布局，只需要在上例的基础上，在右部内容区的盒子区块中再嵌套两个新的div盒子区块，一个盒子区块用于主要内容，设置向左浮动；另一个盒子区块用于次要内容，设置向右浮动。代码如下所示：

与前面的实例相似，只要设置需要的宽度，然后将主要内容区块框向左浮动，将次要内容区块框向右浮动即可，如图3所示。

图3  三列浮动设计

4  设置多列浮动的布局

可以通过借鉴前面介绍的三列浮动布局方式，以在大区块框中再包含小区块框这种层层嵌套的方式实现多列布局。也可以通过设置所有区块框向左浮动，然后在每个区块框之间建立一个垂直隔离带的方式实现多列浮动布局。在下面的示例中创建一个水平导航条，将所有的菜单项都向左浮动排列成一行，并在菜单项之间设置宽度为1像素的隔离带。代码如下所示：

运行后的结果如图4所示。

图4  设置多列浮动的菜单实例布局