這篇隨筆不是專(zhuān)程講SpringSide，卻只得每個(gè)程序員一看。
還記得胡戈調侃《無(wú)極》中的王城布局為“圈圈套圈圈”娛樂(lè )城，也還記得我剛開(kāi)始做Web開(kāi)發(fā)時(shí)“表格套表格”的頁(yè)面布局。在大部分的程序員中，可能還在使用表格進(jìn)行布局，使用表格進(jìn)行布局的巨大缺點(diǎn)就是當頁(yè)面進(jìn)行一點(diǎn)點(diǎn)修改的時(shí)候，都有可能完全打亂頁(yè)面的外觀(guān)，而且非常不利于和美工的配合。當然了，很多美工人員也在使用表格進(jìn)行布局，他們在圖形軟件中設計好頁(yè)面，然后使用切片工具一切就完事，卻給我們需要在網(wǎng)頁(yè)網(wǎng)頁(yè)中動(dòng)態(tài)增加內容的程序員帶來(lái)了麻煩。在CSS盛行的今天，我們早就該讓表格只做它的本分工作了。
網(wǎng)上也有不少使用div + css進(jìn)行布局的教程，卻存在很多缺陷，一是對css的布局模型講解不清楚，讓人很難理解相對定位、浮動(dòng)等概念；二是雖然避免了“表格套表格”的缺點(diǎn)，卻帶來(lái)了“div 套 div”的缺點(diǎn)，過(guò)量使用div標簽；三是class過(guò)多，造成class災難。
要正確使用css，對css的基本只是就不能夠不了解。既然是漫談，我這里就只講四個(gè)方面，最后給出xkland項目作為實(shí)例。
一、CSS中的塊模型
在CSS的定義中，有的html標簽被瀏覽器當成一個(gè)塊來(lái)顯示，比如div、table、p、ul等等，我們稱(chēng)之為塊元素；有的html標簽被瀏覽器顯示在文本行之類(lèi)，如a、span、font等等，我們稱(chēng)之為行內元素。行內元素我這里就不講了，只講講塊元素的模型。
每一個(gè)塊元素都可以分為context、padding、boder和margin幾個(gè)部分，我們常說(shuō)的寬和高，指的只是context的寬和高，padding代表內容和邊框之間的填充，margin代表邊框之外的空白，如下圖：
這幾個(gè)部分都是可以通過(guò)CSS進(jìn)行指定的，當然，CSS還可以控制背景，因此，我們可以通過(guò)CSS來(lái)靈活控制我們頁(yè)面的外觀(guān)。
二、CSS中的文檔流模型
所有的塊元素在html文檔中是按照它們出現在文檔中的先后順序排列的（當然，嵌套不在此列），每一個(gè)塊都會(huì )另起一行。如下圖：
他們對應的html如下：
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div> 為了定義他們的寬度、高度還有邊框，我們定義如下的CSS：
#div1 {}{
border: 1px solid #000099;
height: 60px;
width: 200px;
margin:2px;
}
#div2 {}{
border: 1px solid #000099;
height: 60px;
width: 200px;
margin:2px;
}
#div3 {}{
border: 1px solid #000099;
height: 60px;
width: 200px;
margin:2px;
} 三、CSS中的相對定位和絕對定位模型
在文檔流中，每個(gè)塊元素都會(huì )被安排到流中的一個(gè)位置，我們可以通過(guò)CSS中的定位屬性來(lái)重新安排它的位置。定位分為相對定位和絕對定位，相對定位是相對于該塊元素在文檔流中的位置的，比如，我們可以使用相對定位把div2放到div1的右側，CSS代碼如下：
#div1 {}{
border: 1px solid #000099;
height: 60px;
width: 200px;
margin:2px;
}
#div2 {}{
border: 1px solid #000099;
height: 60px;
width: 200px;
margin:2px;
position: relative;
top: -64px;
left: 204px;
}
#div3 {}{
border: 1px solid #000099;
height: 60px;
width: 200px;
margin:2px;
} 下面是效果：
可以看到一個(gè)有趣的現象，那就是雖然我們把div2移走了，但是div1和div3中間還是有一個(gè)空間，說(shuō)明相對定位的元素是會(huì )占據文檔流空間的，這里的div2就是典型的“站著(zhù)茅坑不拉屎”。
使用絕對定位也是可以把div2擺到div1的右邊的，而且絕對定位是不會(huì )占據文檔流空間的，如下圖，div1和div3之間沒(méi)有空白：
div2的CSS代碼：
#div2 {}{
border: 1px solid #000099;
height: 60px;
width: 200px;
margin:2px;
position: absolute;
top: 15px;
left: 214px;
}
絕對定位是個(gè)好東西，可以把內容顯示到頁(yè)面上的任何位置，但是對于我們程序員來(lái)說(shuō)，卻不能使用太多的絕對定位，因為使用程序動(dòng)態(tài)向div中添加內容，div的大小是不可知的，無(wú)法將每一個(gè)div的位置都定死。
四、CSS中的浮動(dòng)和清除模型
在CSS中，最讓人不好理解的應該算是float和clear意義了。float可以達到這樣一個(gè)效果，就是本來(lái)應該一行一個(gè)的塊元素，如果定義了float屬性，則只要行的空間足夠，它會(huì )跑別的float元素的屁股后面，而不再會(huì )單獨占用一行，如下圖：
這里把div2和div3都定義了為浮動(dòng)，代碼如下：
#div2 {}{
border: 1px solid #000099;
height: 60px;
width: 200px;
margin:2px;
float:left;
}
#div3 {}{
border: 1px solid #000099;
height: 60px;
width: 200px;
margin:2px;
float:left;
} 那什么情況下需要clear呢？這是因為float的元素和絕對定位的元素一樣，也是不占用文檔空間的，因此，如果我們把div2和div3都嵌套在div1中，并且把div2和div3都定義為浮動(dòng)，那么由于它們不占用文檔空間，所以作為父元素的div1不知道自動(dòng)擴展大小，以至于顯示出來(lái)div2和div3會(huì )跑到div1的外面，如下圖：
下面是它們的html代碼：
<div id="div1">div1
<div id="div2">div2</div>
<div id="div3">div3</div>
</div> 下面是它們的css代碼：
#div1 {}{
border: 1px solid #000099;
height: 60px;
width: 450px;
margin:2px;
}
#div2 {}{
border: 1px solid #000099;
height: 60px;
width: 200px;
margin:2px;
float:left;
}
#div3 {}{
border: 1px solid #000099;
height: 60px;
width: 200px;
margin:2px;
float:left;
} 因為float的元素不占用文檔流空間，有時(shí)候被的元素還會(huì )重疊到float元素上，這里我就不舉例了。
為了解決上面的問(wèn)題，就需要在float之后的元素上面使用clear，在此例中，我們在div3后面加入一個(gè)空段落，并設置其為clear，如下：
<div id="div1">div1
<div id="div2">div2</div>
<div id="div3">div3</div>
<p class="clear"></p>
</div> 下面是新增加的空段落的CSS代碼：
效果圖：
