較為常見的CSS布局樣式主要是有兩種：一是兩列布局樣式;二是三列布局樣式;其中三列布局樣式又分為“兩列定寬、中間列自適應(yīng)”的三列結(jié)構(gòu)和三列自適應(yīng)結(jié)構(gòu)。

1、兩列布局樣式

許多網(wǎng)站都有一些共同的特點(diǎn)，即頁面頂部放置一個大的導(dǎo)航或廣告條，右側(cè)是鏈接或圖片，左側(cè)放置主要內(nèi)容，頁面底部放置版權(quán)信息等。

在一般情況下，此類頁面布局的兩列都有固定的寬度，而且從內(nèi)容上很容易區(qū)分主要內(nèi)容區(qū)域和側(cè)邊欄。頁面布局在整體上分為上、中、下三個部分，即header區(qū)域、container區(qū)域和footer區(qū)域。

其中的container又包含mainbox(主要內(nèi)容區(qū)域)和sidebox(側(cè)邊欄)。

2、三列布局樣式

三列布局在網(wǎng)頁設(shè)計時更為常用。對于這種類型的布局，瀏覽者的注意力最容易集中在中欄的信息區(qū)域，其次才是左、右兩側(cè)的信息。

三列布局與兩列布局非常相似，在處理方式上可以利用兩列布局結(jié)構(gòu)的方式處理。三列布局僅比兩列布局多了一列內(nèi)容，無論形式上怎么變化，最終還是基于兩列布局結(jié)構(gòu)演變出來的。

(1)“兩列定寬、中間列自適應(yīng)”的三列結(jié)構(gòu)。

設(shè)計人員可以利用負(fù)邊距原理實(shí)現(xiàn)“兩列定寬、中間列自適應(yīng)”的三列結(jié)構(gòu)。

這里負(fù)邊距值指的是將某個元素的margin屬性值設(shè)置成負(fù)值，對于使用負(fù)邊距的元素可以將其他容器“吸引”到身邊，從而解決頁面布局的問題。

(2)三列自適應(yīng)結(jié)構(gòu)。

實(shí)現(xiàn)三列自適應(yīng)結(jié)構(gòu)，要從改變列的寬度入手。首先，要將submainbox和sidebox兩列的寬度設(shè)置為自適應(yīng);其次，要調(diào)整左、右兩列有關(guān)負(fù)邊距的屬性值;最后，要對內(nèi)容區(qū)域content容器的外邊距margin值加以修改。