CSS 盒模型簡介
在佈局文件時，瀏覽器渲染引擎會根據標準的 CSS 基礎盒模型將每個元素表示為矩形框。CSS 決定這些框的尺寸、位置和屬性（顏色、背景、邊框大小等）。
每個框由四個部分（或區域）組成，由各自的邊緣定義：內容邊緣、內邊距邊緣、邊框邊緣和外邊距邊緣。
內容區域
由內容邊緣限定的內容區域包含元素的“實際”內容，例如文字、影像或影片播放器。其尺寸是內容寬度（或內容盒寬度）和內容高度（或內容盒高度）。它通常具有背景顏色或背景影像。
如果 box-sizing 屬性設定為 content-box (預設) 並且如果元素是塊級元素，則內容區域的大小可以透過 width、min-width、max-width、height、min-height 和 max-height 屬性明確定義。
內邊距區域
由內邊距邊緣限定的內邊距區域擴充套件內容區域以包含元素的內邊距。其尺寸是內邊距盒寬度和內邊距盒高度。
內邊距的厚度由 padding-top、padding-right、padding-bottom、padding-left 和縮寫 padding 屬性決定。
邊框區域
由邊框邊緣限定的邊框區域擴充套件內邊距區域以包含元素的邊框。其尺寸是邊框盒寬度和邊框盒高度。
邊框的厚度由 border-width 和縮寫 border 屬性決定。如果 box-sizing 屬性設定為 border-box，則邊框區域的大小可以透過 width、min-width、max-width、height、min-height 和 max-height 屬性明確定義。當在盒子上設定背景（background-color 或 background-image）時，它會擴充套件到邊框的外邊緣（即在 z 軸順序上延伸到邊框下方）。此預設行為可以透過 background-clip CSS 屬性進行更改。
外邊距區域
由外邊距邊緣限定的外邊距區域擴充套件邊框區域以包含用於將元素與其相鄰元素分隔開的空白區域。其尺寸是外邊距盒寬度和外邊距盒高度。
外邊距區域的大小由 margin-top、margin-right、margin-bottom、margin-left 和縮寫 margin 屬性決定。當發生外邊距塌陷時，由於外邊距在盒子之間共享，因此外邊距區域沒有明確定義。
最後，請注意，對於非替換的行內元素，所佔用的空間量（對行高的貢獻）由 line-height 屬性決定，即使邊框和內邊距仍然顯示在內容周圍。