說說你對 CSS 盒模型 (Box Model) 的理解
2023年1月20日
💎 加入 E+ 成長計畫 與超過 500+ 位軟體工程師一同在社群中成長，並且獲得更多的軟體工程學習資源
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，如下圖所示。
