初探ＣＳＳ＋ＤＩＶ網(wǎng)頁布局

四、CSS網(wǎng)頁布局分類

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

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

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

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

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

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

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

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

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

浮動式布局使得頁面的大部分內(nèi)容都可以由瀏覽器來自動調(diào)試之間的關(guān)系，使我們能夠?qū)Ｗ⒂跇邮皆O(shè)計而非其相互之間的浮動關(guān)系，我們只需要簡單地設(shè)置浮動方向便可以完成對象的布局分布。

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

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

五、結(jié)語

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

參考文獻：

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

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