說說你對 CSS 盒模型 (Box Model) 的理解
2023年1月20日
💎 加入 E+ 成長計畫 與超過 400+ 位軟體工程師一同在社群中成長,並且獲得更多的軟體工程學習資源
CSS 盒模型 (Box Model)
瀏覽器引擎在佈局文檔 (document) 時,會根據 CSS 的 Box Model 把每個元素視為長方形狀的 Box,這個 Box 是由內容 (content)、內距 (padding)、邊框 (border) 和外距 (margin) 所組成。
內容是指元素真實的內容,例如文字或圖片的真實內容,我們可以透過 width
與 height
等來調整內容的寬與長。在邊框以內的是內距 (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,如下圖所示。