### [CSS3 盒模型详解：content-box 和 border-box](https://www.huociguo.com/article/2033)

**Published:** 2026-11-01T14:24:39

**Author:** 米了

**Excerpt:** CSS 布局体系里所有的页面元素在浏览器渲染的时候都会被抽象成矩形盒子，盒模型就是定义这些盒子空间分配规则的核…

CSS 布局体系里所有的页面元素在浏览器渲染的时候都会被抽象成矩形盒子，盒模型就是定义这些盒子空间分配规则的核心底层逻辑。它决定了元素的宽高计算方式、边距表现以及最终占位尺寸，绝大多数布局错位、元素溢出、响应式断点失效的问题，本质上都是由于对盒模型规则的理解偏差造成的。

![](https://api.huociguo.com/wp-content/uploads/2026/11/2026-11-01-222339-011438544b-1.webp "2026-11-01-222339-011438544b-1")

CSS3 盒模型详解：content-box 和 border-box

完整的CSS盒模型由四层结构组成：内容区承载文本、图片等实际渲染的内容，内边距作为内容与边框之间的缓冲区域，边框用来界定元素的视觉边界，外边距则控制元素与相邻元素之间的间距。其中外边距总是独立于盒模型尺寸计算之外，不受box-sizing属性的影响，在垂直方向上相邻的块级元素的外边距会自动合并取较大值，是经常踩到的坑。

box-sizing 属性有两种主要的计算方式：默认的 content-box 遵循 W3C 标准规则，声明的 width 和 height 只对应内容区的尺寸，内边距和边框会额外叠加到元素总占位宽度上，很容易造成固定容器中的子元素溢出换行。border-box 模式下声明的宽高直接包含了内容区、内边距以及边框，浏览器会自动向内压缩内容区的尺寸，使得元素的总占位完全符合声明值，不需要手动叠加计算边距增量，大大降低了响应式布局、栅格系统的实现成本。

现代前端工程实践中，一般会在项目入口全局设置 box-sizing: border-box，统一所有元素的盒模型规则，防止不同的第三方组件库由于盒模型不一致而产生尺寸错位的问题。只有在少数需要精确获取内容区原生尺寸的情况下才会局部使用 content-box 模式。

**Tags:** box-sizing, CSS3, 前端布局, 盒模型, 网页渲染

**Categories:** CSS3

---