你知不知道HTML元素都是裝在盒子裡的？

海興發表於2016-06-13
HTML

不管你要用HTML顯示什麼內容，統統都會被放到一個長方形的盒子裡。但瀏覽器呈現給我們的是一個二維世界，二維世界裡的盒子跟我們這個世界的盒子不一樣。二維世界裡的盒子雖然只有寬和高兩個維度，但從能裝東西這個角度來說，那確實是盒子。

你在瀏覽器介面上看到的所有HTML元素都是裝在盒子裡的，不過你可能看不到盒子，要仔細觀察才能發現一些蛛絲馬跡。而且這個盒子還不止一層，足足有三層，大概是這個樣子的：

enter image description here

圖一：盒子模型示意圖 （源自Introduction to the CSS box model）

你要顯示的內容在最裡面，然後外面有一個padding層，接下來是border層，最外一層叫margin。這三層裡有可能可以直接看到的只有border，其它兩層雖然你可以感覺到它們的存在，但從視覺上來說，它們是完全透明的。

在繼續往下看之前，先考慮兩個問題：

  1. 為什麼要搞個盒子？
  2. 這個盒子關我啥事兒？

第一個問題說來話長，如果確實像知道，還是去找制定CSS標準的那幫人，或者做瀏覽器的聊聊吧。說實話我也不知道為啥。

第二個問題，先假設你要買一套400*100的房子（畫素，不是米！），規格說明是這樣的：

div {
  width: 400px;
  height: 100px;
  border: 6px solid #949599; 
  margin: 20px;
  padding: 20px;  
}

你一看width和height沒問題，就一蹦一跳地去交錢了。結果算賬的時候，你發現開發商要跟你收492*192的錢，你是不是想問候他老母？但還沒等你開口，他就拿出設計圖：

enter image description here 圖二、盒子模型設計圖（源自Opening the Box Model）

然後甩給你兩個公式：

  • width = margin-right + border-right + padding-right + width + padding-left + border-left + margin-left
  • height = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

並且還沒等你看明白，就拿出計算器一通按，然後笑眯眯地看著你，請你自己看492和192是怎麼來的。

  • Width: 492 = 20 + 6 + 20 + 400 + 20 + 6 + 20
  • Height: 192 = 20 + 6 + 20 + 100 + 20 + 6 + 20

簡單來說，寬度要把所有橫向的數都加起來，不能漏掉margin、border和padding的left和right；高度要把豎向的所有數都加起來，不能漏掉margin、border和padding的top和bottom。

所以說，你本來只想放一個400px*100px的圖片，但瀏覽器卻要給你492px*192px，如果你毫無心理準備，肯定會有點小激動吧。因此在設計頁面時，一定要掌握盒子模型，要知道還有公攤面積這回事兒。不過這裡只是簡單介紹了一下，要深入瞭解，可以到兩張圖片的出處去看一下。

另外，chrome瀏覽器的開發者工具可以檢視所有頁面元素的盒子。這裡還有個小程式，可以調節幾個關鍵的屬性值，你可以直觀地感受下。

相關文章