SpringSide開發實戰（三）：漫談CSS和頁面配置

這篇隨筆不是專門針對SpringSide，卻只得每個程式員一看。

還記得胡戈調侃《無極》中的王城布局為“圈圈套圈圈”娛樂城，也還記得我剛開始做 Web開發時“表格套表格”的頁面配置。在大部分的程式員中，可能還在使用表格進行布局 ，使用表格進行布局的巨大缺點就是當頁面進行一點點修改的時候，都有可能完全打亂頁面 的外觀，而且非常不利於和美工的配合。當然了，很多美工人員也在使用表格進行布局，他 們在圖形軟體中設計好頁面，然後使用切片工具一切就完事，卻給我們需要在網頁網頁中動 態增加內容的程式員帶來了麻煩。在CSS盛行的今天，我們早就該讓表格只做它的本分工作 了。

網上也有不少使用div + css進行布局的教程，卻存在很多缺陷，一是對css的布局模型 講解不清楚，讓人很難理解相對定位、浮動等概念；二是雖然避免了“表格套表格”的缺點 ，卻帶來了“div 套 div”的缺點，過量使用div標籤；三是class過多，造成class災難。

要正確使用css，對css的基本只是就不能夠不瞭解。既然是漫談，我這裡就只講四個方 面，最後給出xkland項目作為執行個體。

一、CSS中的塊模型

在CSS的定義中，有的html標籤被瀏覽器當成一個塊來顯示，比如div、table、p、ul等 等，我們稱之為塊元素；有的html標籤被瀏覽器顯示在文本行之類，如a、span、font等等 ，我們稱之為行內元素。行內元素我這裡就不講了，只講講塊元素的模型。

每一個塊元素都可以分為context、padding、boder和margin幾個部分，我們常說的寬和 高，指的只是context的寬和高，padding代表內容和邊框之間的填充，margin代表邊框之外 的空白，如下圖：

這幾個部分都是可以通過CSS進行指定的，當然，CSS還可以控制背景，因此，我們可以 通過CSS來靈活控制我們頁面的外觀。

二、CSS中的文檔流模型

所有的塊元素在html文檔中是按照它們出現在文檔中的先後順序排列的（當然，嵌套不 在此列），每一個塊都會另起一行。如下圖：