说说你对 CSS 盒模型 (Box Model) 的理解
2023年1月20日
💎 加入 E+ 成長計畫 與超過 350+ 位軟體工程師一同在社群中成長，並且獲得更多的軟體工程學習資源
若你正在准备海外前端面试，可以阅读本篇的英文版《What is the CSS Box Model?》
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，如下图所示。
