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

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

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

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

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

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

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

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

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

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

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

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

將左欄的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è)置，只要略大于左右欄寬度即可），用于實(shí)現(xiàn)兩邊自適應(yīng)寬度。

五、結(jié)語(yǔ)

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

參考文獻(xiàn)：

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

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