說說你對 CSS 盒模型 (Box Model) 的理解

2023年1月20日

💎 加入 E+ 成長計畫 與超過 400+ 位軟體工程師一同在社群中成長,並且獲得更多的軟體工程學習資源

CSS 盒模型 (Box Model)

瀏覽器引擎在佈局文檔 (document) 時,會根據 CSS 的 Box Model 把每個元素視為長方形狀的 Box,這個 Box 是由內容 (content)、內距 (padding)、邊框 (border) 和外距 (margin) 所組成。

W3C and Internet Explorer box models
W3C and Internet Explorer box models
圖片來源:MDN 上的 Box Model 示意圖

內容是指元素真實的內容,例如文字或圖片的真實內容,我們可以透過 widthheight 等來調整內容的寬與長。在邊框以內的是內距 (padding),如果調高內距,會讓內容與邊框之間的距離變大;而在邊框以外的會是外距 (margin),假如想跟其他元素之間隔出距離,就需要透過設定外距來達成。

事實上,在瀏覽器歷史中,盒子模型有兩種,一是 content-box (W3C 標準盒子模型)、另一個是 border-box (IE 盒子模型)。目前已經可以透過 css 的 box-sizing 來自由設定盒子模型,如果不設定,預設值都會是 content-box (畢竟 IE 都已經退場了)。

這兩者的區別在於,兩種的盒子模型計算盒子的寬和高時標準不一樣。content-box 盒子的 width 和 height 只會包含 content,不包含 padding 和 border; 但 border-box 的盒子模型會包含 content、padding 和 border,如下圖所示。

W3C and Internet Explorer box models
W3C and Internet Explorer box models
圖片來源:https://en.wikipedia.org/wiki/CSS_box_model
🧵 如果你想收到最即時的內容更新,可以在 FacebookInstagram 上追蹤我們