什么是 CSS 盒模型：网页布局的基石

写网页时经常遇到这样的情况：明明设置了一个元素的宽度是 200px，结果在页面上量出来却更宽。要理解这个问题，就要搞懂 CSS 的盒模型。

盒模型的四部分

每个 HTML 元素本质上都是一个矩形盒子。从内到外依次是：内容区域（Content）、内边距（Padding）、边框（Border）、外边距（Margin）。元素的实际宽度 = 内容宽度 + 左右内边距 + 左右边框。很多人踩的坑就在这里。

标准模型 vs 怪异模型

标准盒模型（box-sizing: content-box）：width 只算内容区域。怪异盒模型（box-sizing: border-box）：width 包括内容、内边距和边框。推荐使用 border-box，因为它更符合直觉——你设了多少就是多少。

实际应用

全局设置 * { box-sizing: border-box; } 是很多前端项目的标配。这样写布局时不会被 padding 和 border 干扰，宽度计算简单多了。Flexbox 和 Grid 布局出现后，盒模型的管理变得更加灵活，但理解基本原理仍然很重要。

CSS 盒模型虽然基础，但理解透彻了，布局问题就解决了一大半。