CSS 盒模型（Box Model）的學習和理解

2024-07-11 08:46:40

字體：大中小

來源：轉載

供稿：網友

學習css已經有段時間了，對CSS的盒模型（Box Model）有了一定的理解。今天整理一下我學習中遇到的關于CSS盒模型（Box Model）的問題，希望對那些初學css的朋友有些幫助。

　　什么是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的目的所在嗎？

上一篇：CSS的Box模型圖

下一篇：使您的CSS網頁布局代碼更專業精簡CSS文件