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所示。