什麼是盒模型（box modal）？

在 HTML 裡每個元素都可以看成是一個盒子，稱之為「盒模型 (box model) 」可以用 CSS 調整盒子的屬性（width、height、padding、margin）

圖片來源

• margin：邊框與周圍方塊之間的空間 (視為「外部」空間)
• padding：從方塊的邊框位移內容的空間 (視為「內部」空間)
• border：方塊的邊界 (無論是否可見)
• content：方塊中包含的內容 (例如文字、圖像等)

由於為元素設定 width 和 height 時，width 和 height 的數值會被對應到 content 的尺寸,瀏覽器計算時不會將 pading、border 算在內，所以在進行排版時，有可能會因為算錯尺寸而版型跑掉。為了解決這個問題，可以設定 CSS 的 box-sizing屬性:

圖片來源

content-box: 為預設值，設定的 width / height 是content的寬高；但整個元素的寬高會是content再向外加上padding、border，所以會大於我們設定的 width / height。

border-box: 比較符合人類的認知，也就是瀏覽器在計算 width / height 時，會把 content、padding、border 這三層一併算入，所以：

width = content 寬 + padding 寬 + border 寬
height =content 高 + padding 高 + border 高

因此，一般來說會直接使用星號 (*) 選擇器讓 box-sizing: border-box 套用到所有的內容。

* {
  box-sizing: border-box;
}