3.4 常见的网页布局方式

CSS是控制网页布局样式的基础，并且是真正能够做到网页表现和内容分离的一种样式设计语言。相对于传统的HTML的简单样式控制而言，CSS能够对网页中对象的位置进行像素级的精确控制，支持几乎所有的字体、字号的样式，还拥有着对网页对象盒子模型样式的控制能力，并且能够进行初步页面交互设计，是当前基于文件展示的优秀的样式设计语言。

3.4.1 居中布局设计

目前居中布局设计在网页布局中的应用非常广泛，所以如何在CSS中让设计居中显示是大多数开发人员首先要学习的重点之一。让设计居中显示主要有以下两种基本方法。

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

假设一个布局，希望其中的容器Div在屏幕上水平居中：

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

提示

这种CSS样式定义方法在绝大部分浏览器中都是有效的。但是，IE5.X和IE6版本的IE浏览器不支持自动空白边，因为其将text-align:center理解为让所有对象居中，而不只是文本。可以利用这一点，让主体标签中所有对象居中，包括容器Div，然后将容量的内容重新对准左边，代码如下：

以这种方式使用text-align属性，不会对代码产生任何严重的影响，如图3-15所示。

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

首先定义容器的宽度，然后将容器的position属性设置为relative，将left属性设置为50%，就会把容器的左边缘定位在页面的中间，代码如下：

如果不是让容器的左边缘居中，而是让容器的中间居中，只需要对容器的左边界应用一个负值的空白边，使其宽度等于容器宽度的一半。这样就会把容器向左移动它的宽度的一半，从而让它在屏幕上居中，代码如下：

3.4.2 浮动布局设计

本节介绍5种浮动布局设计，即两列固定宽度布局、两列固定宽度居中布局、两列宽度自适应布局、两列右列宽度自适应布局和三列浮动中间列宽度自适应布局。

1．两列固定宽度布局

两列固定宽度布局非常简单，其HTML代码如下：

为id名称为left与right的Div制定CSS样式，让两个Div在水平行中并排显示，从而形成两列式布局，其CSS代码如下：

为了实现两列式布局使用了float属性，这样两列固定宽度布局就能够完整显示出来，预览效果如图3-16所示。

2．两列固定宽度居中布局

两列固定宽度居中布局可以使用Div的嵌套方式来完成，用一个居中的Div作为容器，将两列分栏的两个Div放置在容器中，从而实现两列的居中显示，其HTML代码如下：

为分栏的两个Div加上一个id名称为box的Div容器，其CSS代码如下：

提示

一个对象的实际宽度，不是仅由其本身宽度值来决定的，而是由其本身的宽度值、左右边框值等相加而成的。由于#left宽度为200px，左右都有2px的边框，因此，#left的实际宽度为204px，#right的实际宽度与#left的实际宽度相同，所以#box的宽度设定为408px。

#box有了居中属性，里面的内容自然也能做到居中，这样就实现了两列固定宽度居中布局，预览效果如图3-17所示。

3．两列宽度自适应布局

宽度自适应布局主要通过设置宽度的百分比值实现，在两列宽度自适应布局中同样是对宽度的百分比值进行设置，其CSS代码如下：

左列宽度设置为20%，右列宽度设置为70%，预览效果如图3-18所示。

提示

此处没有把整体宽度设置为100%，是因为前面已经提示过，左列的实际宽度不仅是浏览器窗口宽度的20%，还应当加上其左、右边框，这样算下来，左、右列都超过了自身的百分比宽度，最终的宽度也超过了浏览器窗口的宽度，因此若将整体宽度设置为100%，则右列将被挤到第二行显示，从而会失去左右分列的效果。

4．两列右列宽度自适应布局

在实际应用中，有时候需要左列宽度固定，右列宽度根据浏览器窗口的大小自动适应，在CSS中只需要设置左列宽度，右列不设置任何宽度值且不浮动即可，其CSS代码如下：

左列将呈现200px的宽度，而右列宽度将根据浏览器窗口的大小自动适应，预览效果如图3-19所示。两列右列宽度自适应布局经常在网站中用到，此外，左列宽度也可以自适应，方法是一样的。

5．三列浮动中间列宽度自适应布局

三列浮动中间列宽度自适应布局是左列宽度固定居左显示，右列宽度固定居右显示，而中间列则需要在左列和右列的中间显示，其宽度根据左、右列的间距变化自动适应的布局方式。此时单纯使用float属性与百分比属性不能实现，而需要使用绝对定位来实现。绝对定位后的对象，不需要考虑它在页面中的浮动关系，只需要设置对象的top、right、bottom及left四个方向即可，其XHTML代码结构如下：

首先使用绝对定位对左列与右列进行位置控制，其CSS代码如下：

而中列则用普通CSS样式，其CSS代码如下：

对于#main，不需要再设置浮动方式，只需要让它的左边和右边的边距永远保持#left和#right的宽度，便实现了两边各有204px的自适应宽度，刚好让#main在这个空间中，从而实现了布局的要求，预览效果如图3-20所示。

3.4.3 高度自适应

高度值同样可以使用百分比值进行设置，不同的是，直接使用height:100%不会显示效果，这与浏览器的解析方式有一定关系，实现高度自适应的CSS代码如下：

对#left设置height:100%的同时，也对html,body设置了height:100%，一个对象的高度是否可以使用百分比显示，取决于其父级对象。#left在页面中直接放置在body中，因此它的父级对象就是body，而在浏览器默认的状态下，没有给body一个高度属性，因此直接对#left设置height:100%，不会产生任何效果，而对html,body设置了height:100%之后，它的子级对象#left的height:100%便可以起作用，这便是浏览器解析规则引发的高度自适应问题。而对html,body设置height:100%，能使IE浏览器与Firefox浏览器实现高度自适应，预览效果如图3-21所示。