繼續說明昨天沒說到的部分

Box Model (盒模型)

一個 box model 包含，margin、border、padding、content。![!

• margin：推擠元素外部的間距。（⚠️ 可以為負值，但會與其它元素重疊）
• border：框線（包覆內容）。
• padding：推擠元素內部的間距。（⚠️ 不能為負值）
• content：內容（任何 HTML 元素）。

box-sizing

計算 box-model 寬高的方式。

• content-box：預設值
  實際寬高＝所設定的數值＋border＋padding
  
  
• border-box：確保元素計算寬度及高度時，不受 padding、border 影響。
  實際寬高＝所設定的數值(包含 padding、border)
  

可以使用偽元素將格式一起更換
在沒設定 box-sizing 時，預設是 content-box，利用偽元素可將設定改為 border-box

*, *::before, *::after {
    box-sizing: border-box;
}