🔥《ChatGPT 指令大全與創新應用》新書上架!👉 立即購買

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

若你正在準備海外前端面試,可以閱讀本篇的英文版《What is the CSS Box Model?》

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
© 2023 explainthis.io
酉是數據科技股份有限公司