四、CSS網頁布局分類

1．一列固定寬度。一列布局是所有布局的基礎，也是最簡單的布局形式，即一種固定寬度的布局樣式。DIV在默認狀態(tài)下，寬度將占據(jù)整行的空間，因此當設置了寬度屬性后，DIV寬度將變?yōu)樵O置的寬度。

2．一列自適應。自適應布局是網頁設計中常見的布局形式。自適應的布局能夠根據(jù)瀏覽器窗口的大小，自動改變其寬度或高度值，是一種非常靈活的布局形式。良好的自適應布局網站對不同分辨率的顯示器都能提供最好的顯示效果。實際上DIV在默認狀態(tài)下展區(qū)整行的空間，便是寬度100%的自適應布局的表現(xiàn)形式。一列自適應布局只需要將寬度由固定值改為百分比的形式即可完成。

CSS的大部分數(shù)值作為參數(shù)的樣式屬性都提供百分比值。Width（寬度）屬性也不例外。如將寬度設置為80%，則DIV的寬度就變?yōu)闉g覽器寬度的80%，當瀏覽器窗口的大小調整時，其寬度還將維持在瀏覽器當前寬度比例的80%。

3．一列固定寬度居中。頁面整體居中是網頁設計中常見的形式，在傳統(tǒng)表格布局中，我們可以使用表格的 align屬性來實現(xiàn)。DIV本身也支持該屬性，但在CSS布局中為了實現(xiàn)表格與內容分離，因此在設置居中屬性時，通過margin屬性來控制對象的上下左右四個方向的外邊距。Margin屬性中可以直接使用數(shù)據(jù)，也支持“auto”，即自動判斷邊距。如果將左右邊距設置為auto，瀏覽器就會將DIV左右邊距設置為相同，從而實現(xiàn)居中效果。

4．兩列固定寬度。我們知道DIV用于對某一個區(qū)域的標識，兩列的布局需要采用兩個DIV。兩列固定寬度的實現(xiàn)需要新的屬性float。該屬性用來控制對象浮動布局方式。

Float是CSS布局非常強大的布局功能。也是理解CSS布局的關鍵問題所在。在CSS中，包括DIV在內的任何元素都可以以浮動的方式進行顯示。

浮動是一種非常先進的布局方式，它能夠改變頁面中對象的前后流動順序，這樣可以使內容的排版變得簡單而且具有良好的伸縮性。

Float屬性有三個值，none表示對象不浮動。使用left時，表示右側對象將流到當前對象左側。使用right時，表示左側對象將移動到當前對象的右側。

要實現(xiàn)兩列的布局的話，定義左欄和右欄中的float屬性都為“l(fā)eft”。這樣右欄的內容將流入到左欄的右邊，并根據(jù)左欄的寬度，自動流入并貼至左欄，而貼近的程度則由左欄的右邊距和右欄的左邊距來控制，不需要一欄對象本身的寬度值。

浮動式布局使得頁面的大部分內容都可以由瀏覽器來自動調試之間的關系，使我們能夠專注于樣式設計而非其相互之間的浮動關系，我們只需要簡單地設置浮動方向便可以完成對象的布局分布。

5．三列浮動中間列寬度自適應。如果要求左欄和右欄固定寬度，中間欄需要在左欄和右欄中間，并根據(jù)左右欄的寬度自動調整間距。需要實現(xiàn)這樣的布局，就需要使用position屬性來定位。

將左欄的position設置為absolute，并將top和left設置為0px。將右欄的position設置為absolute，并將top和right設置為0px。將中間欄設置margin屬性中l(wèi)eft和right設置104px（該參數(shù)根據(jù)左右欄的寬度設置，只要略大于左右欄寬度即可），用于實現(xiàn)兩邊自適應寬度。

五、結語

使用CSS+DIV布局，真正實現(xiàn)了結構、表現(xiàn)和行為的分離。提高了網頁開發(fā)的效率和頁面下載的速度，提高了網站維護和修改的效率。

參考文獻：

[1]謝君英，CSS與Dreamweaver CS3完美網頁設計，北京：人民郵電出版社，2009.1.

[2]王海濤，CSS權威教程（第3版），北京：清華大學出版社，2008.9.