CSS入門之盒模型（六分之四）

盒模型要點知識

務必注意看，這但是前端面試 一定會遇到 的問題。

• box-sizing

  盒模型的主要CSS屬性，除繼承外有兩個值：

  1. content-box

     這裏再也不細說歷史緣由，只說其做用。

     content-box將一個標籤元素所佔的 物理像素區域 的計算方法表達爲：寬高 + 內邊距 + 邊框 + 外邊距

  2. border-box

     border-box將一個標籤元素所佔的 物理像素區域 的計算方法表達爲：寬高、內邊距、邊框的最大值 + 外邊距

     這裏說的寬高就是CSS屬性的width與height，或者是子標籤所撐起來的大小。

     下面介紹其餘三個相關屬性

• 內邊距（padding）

  首先，你想一想一個立方體包裝盒，其內部有一個小一點的盒子，那麼裏面盒子與外面這個盒子相隔的區域就是內邊距，換作HTML標籤具象化以下：

  其中紅色區域就是內邊距

• 邊框（border）

  邊框就是字面意思，其HTML具象化以下：

  其中黑色就是邊框

• 外邊距（margin）

  外邊距就是標籤間的間距或便籤與父標籤邊線的距離。 嚴格來講與標籤大小無關，可是影響視覺上的位置。HTML具象化需調試指出，以下：

  其中的最外圈的黃色區域就是margin了。

  注意一下：margin能夠負值；inline標籤的上下margin無效。

---

若是你確實明白了上述概念後，有以下圖示與解說，詳細說了具體的標籤大小計算方式，這裏注意，標籤大小是指 物理像素大小，而不是上文說的 物理像素區域。

所佔大小就是實際的像素值，而所佔區域是包含了margin外邊距的。

注意計算時候，padding和border可都是有四邊的。
官方定義border-box是指把padding與border都算做寬高，理解上有歧義，因此你直接取值當作wh與padding與border最大值便可。

---

小建議

強烈推薦使用border-box來在實際中使用，實際工做或項目中，定製好padding與border後再去修改這兩個值的可能性遠遠低於不改的可能性，因此能用border-box就用border-box吧，* {box-sizing: border-box;}多是個好習慣。

不然UI丟你個80*80像素大小的樣式，你本身就去拆分吧。

---

源碼相關

CodePen

若是文章對你有一點幫助，我就很是開心了。 喜歡文章的話，請關注下我，按期發佈技術相關文章，滿滿都是乾貨。