它是由內容區域、內間距區域、邊框區域和外邊距區域構成的

• content
• padding
• border
• margin

根據 box-sizing 屬性的不同，盒子的寬高計算方式也不相同

• 預設： box-sizing: content-box
• box-sizing: border-box

有塊級盒子和行內盒子兩種

• 塊級盒子可以設定寬高值，padding 和 margin 則都會生效並且擠佔空間。
• 行內盒子無法手動設定寬高，並且垂直方向上的 padding 和 margin 雖然能夠設定生效，但並不會擠佔其他盒子的空間，會導致重疊。不過水平方向上的則會擠佔其他盒子的空間:

可以通過設定外部和內部顯示型別改變佈局方式

display: flex;
display: grid;	
display: inline-block;

還有一種特殊盒子 - 替換元素

• 替換元素有 <img> 、 <iframe> 、 <video> 等

• 替換元素不受當前頁面css樣式影響，但可以通過 CSS 來控制替換元素在盒子中的位置

• 例如圖片中：

  object-fit: cover;  // 圖片等比例佔滿整個盒子，裁掉顯示不下的部分
  object-position: center; // 設定圖片在盒子中的位置，可以是靠下或者居中等
  

最後我們瞭解到了盒子的邊距塌陷的情況

• CSS 盒子模型中，如果給兩個盒子同時設定外邊距，那麼它們最終的距離很可能並不是兩個盒子的外邊距之和，這種情況會發生在相鄰盒子之間，也會發生在父子盒子之間。當它們同時設定了邊距時，如果都是正數，則取最大值，如果相同，則取其中之一，如果有正有負，則取最大的正數加上最小的負數之和，如果都是負數，則取最小值。
• 如果兩個盒子之間有 border、padding 或者 BFC 的話，就不會有邊距塌陷