什麼是css盒模型？

W3C組織就建議把所有網頁上的對象都放在一個盒(box)中，設計師可以通過建立定義來控制這個盒的屬性，這些對像包括段落、列表、標題、圖片以及層。盒模型主要定義四個地區：內容(content)、邊框距(padding)、邊界(border)和邊距(margin)。margin，background-color，background-image，padding，content，border之間的層次、關係和相互影響。盒模型的。

 

　　這些屬性我們可以把它轉移到我們日常生活中的盒子（箱子）上來理解，日常生活中所見的盒子也具有這些屬性，所以叫它盒子模式。那麼內容（content）就是盒子裡裝的東西；而填充（padding）就是怕盒子裡裝的東西（貴重的）損壞而添加的泡沫或者其它抗震的輔料；邊框（border）就是盒子本身了；至於邊界（margin）則說明盒子擺放的時候的不能全部堆在一起，要留一定空隙保持通風，同時也為了方便取出嘛。在網頁設計上，內容常指文字、圖片等元素，但是也可以是小盒子（DIV嵌套），與現實生活中盒子不同的是，現實生活中的東西一般不能大於盒子，否則盒子會被撐壞的，而CSS盒子具有彈性，裡面的東西大過盒子本身最多把它撐大，但它不會損壞的。填充和邊界只有寬度屬性，可以理解為生活中盒子裡的抗震輔料厚度，而邊框有大小和顏色之分，可以對每一條邊框定義不同的樣式。我們又可以理解為生活中所見盒子的厚度以及這個盒子是用什麼顏色材料做成的，邊界就是該盒子與其它東西要保留多大距離。
　　width和height定義的是Content部分的寬度和高度而不是整個盒子的高度，這個是初學者常犯的一個錯誤，padding border margin的寬度依次加在外面。背景會填充padding和content部分。但是由於瀏覽器設計上的問題，不同瀏覽器顯示效果會有些不同。左右Margin加倍的問題當box為float時，IE6中box左右的margin會加倍。 
　　W3C定義的平面盒模式如下： 

　　轉變我們的思路
　　傳統的前台網頁設計是這樣進行的：根據要求，先考慮好主色調，要用什麼類型的圖片，用什麼字型、顏色等等，然後再用Photoshop這類軟體自由的畫出來，最後再切成小圖，再不自由的通過設計HTML產生頁面，改用CSS排版後，我們要轉變這個思想，此時我們主要考慮的是頁面內容的語義和結構，因為一個強CSS控制的網頁，等做好網頁後，你還可以輕鬆的調你想要的網頁風格，況且CSS排版的另外一個目的是讓代碼易讀，區塊分明，強化代碼重用，所以結構很重要。如果你想說我的網頁設計的很複雜，到後來能不能實現那樣的效果？我要告訴你的是，如果用CSS實現不了的效果，一般用表格也是很難實現的，因為CSS的控制能力實在是太強大了，順便說一點的是用CSS排版有一個很實用的好處是，如果你是接單做網站的，如果你用了CSS排版網頁，做到後來客戶有什麼不滿意，特別是色調的話，那麼改起來就相當容易，甚至你還可以定製幾種風格的CSS檔案供客戶選擇，又或者寫一個程式實現動態調用，讓網站具有動態改變風格的功能。

　　實現結構與表現分離
　　在真正開始布局實踐之前，再來認識一件事——結構和表現相分離，這也用CSS布局的特色所在，結構與表現分離後，代碼才簡潔，更新才方便，這不正是我們學習CSS的目的所在嗎？