上篇文章總結了塊級元素和行內元素 這篇文章總結了有關盒子模型的知識，助於梳理知識 首先，什麼是盒子模型我們知道，html文檔中，基本上每個元素都可以看作一個盒子，我們稱之為盒子模型。 盒子模型的組成盒子模型包含四個重要的部分：content(width、height):盒子內容寬高padding:內 ...
上篇文章總結了塊級元素和行內元素
這篇文章總結了有關盒子模型的知識，助於梳理知識
首先，什麼是盒子模型
我們知道，html文檔中，基本上每個元素都可以看作一個盒子，我們稱之為盒子模型。
盒子模型的組成
盒子模型包含四個重要的部分：
content(width、height):盒子內容寬高
padding:內邊距(填充)
border:邊框
margin:外邊距
重點：對於盒子來說，設置的寬高和真實占有寬高是不一樣的
如圖（一般我們以標準盒子模型為主學習）
在標準盒子模型中,我們用css屬性中的設置width,height其實是內容content的寬高，如果增加邊距和邊框將會增加盒子的寬度（也就是說,如果padding,margin,border都為0的話，盒子真實占有寬度和內容寬度是一樣的）。
在IE盒子模型中,我們設置的width、height指的是盒子真實占有寬高,即如content+border+padding的寬高。
PS：
在瀏覽器，有一些元素有著預設的設置margin,padding,border,這也是我們寫css時一般加入*{margin:0;padding:0}重置樣式的原因。
註意,盒子模型是立體的，即組成盒子的每個部分有著各自的層次
border----->content+padding----->background-image----->background-color----->margin 如下圖：
即：
第1層：盒子的邊框(border)，
第2層：元素的內容(content)、內邊距(padding)
第3層：背景圖(background-image)
第4層：背景色(background-color)
第5層：盒子的外邊距(margin)
那麼這些層級有什麼用呢？
通過這些層級顯示，我們可以知道優先順序的問題：
比如同時設置背景圖和背景色時，背景圖將會在背景色上方顯示
原情況（有背景圖無背景色）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style> .box { width:400px; height: 200px; margin:100px auto; background-image: url(1.jpg); /*background-color: gray;*/ } </style> </head> <body> <div class="box"> </div> </body> </html>
效果圖：
沒有背景圖只有背景色時：
有背景圖有背景色時：
背景色被背景圖直接覆蓋了。
如何查看網頁中的元素的盒子具體情況？？
此處以chrome瀏覽器為例，其他瀏覽器大同小異：
使用F12查看網頁源代碼，選擇一個元素，點擊右邊界面的'Computed'選項卡即可：
參考文章：
