在CSS布局中，每一个HTML元素都会被渲染成一个矩形的盒子，这个盒子由内容、内边距、边框和外边距四部分组成，这就是所谓的盒子模型。理解盒子模型是掌握网页布局的第一步，因为页面中所有元素的定位、大小、间距计算都建立在这个概念之上。如果对盒子模型缺乏清晰认识，就会经常遇到元素宽度溢出、间距计算错误、布局错位等令人头疼的问题。
盒子模型的四个组成部分
一个完整的盒子从内到外分为四层：content（内容区域）、padding（内边距）、border（边框）和margin（外边距）。内容区域用来放置文字、图片等实际内容，它有明确的宽度和高度；padding是内容与边框之间的透明区域，用来撑开内容与边框的距离；border是包裹在padding外面的边框线，可以设置粗细、样式和颜色；margin则是盒子与其他盒子之间的距离，它永远透明，不属于盒子本身的可见部分。
这四层中有一个重要的区别需要牢记：背景色和背景图的覆盖范围是从content一直延伸到border的边缘（默认情况下），也就是说padding区域会显示元素的背景，而margin区域永远不会显示背景。另外，margin可以为负值，实现元素重叠的效果，但padding不允许为负数。
以一个简单的例子来说明各层的作用：
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #333;
margin: 10px;
}这段代码中，内容区域是200px乘100px，padding在四周各占20px，边框粗5px，margin在四周各占10px。那么这个盒子在页面上实际占用的空间是多少呢？这就引出了标准盒模型与IE盒模型的区别。
标准盒模型与怪异盒模型的区别
两种盒模型的核心差异在于width和height属性到底指哪一部分。在标准盒模型（content-box）中，width只指content区域的宽度，元素的实际占用宽度等于width加上左右padding、左右border，再加上左右margin。按上面的例子计算：200 + 20×2 + 5×2 + 10×2 = 270px。
而在怪异盒模型（border-box）中，width指的是content加padding再加border的总和，margin不计算在内。如果采用border-box，同样设置width为200px，padding和border会向内挤压content区域，实际内容宽度变成200 - 40 - 10 = 150px，但盒子整体宽度保持200px不变。
可以通过一张对比表格直观理解两者的差异：
| 对比项 | content-box（标准盒模型） | border-box（怪异盒模型） |
|---|---|---|
| width的含义 | 仅content区域宽度 | content + padding + border |
| 实际占用宽度 | width + padding + border + margin | width + margin |
| 设置padding后的表现 | 盒子整体变大 | 盒子大小不变，内容被压缩 |
历史上IE5、IE6在混杂模式下使用的是怪异盒模型，这也是“怪异”一词的由来。但如今看来，border-box的计算方式反而更符合直觉：你告诉浏览器这个盒子多宽，它就是多宽，不必再做加法心算。因此现代开发中普遍推荐使用border-box。
box-sizing属性的使用与实践建议
CSS3提供了box-sizing属性来切换盒模型类型，取值为content-box或border-box。最实用的做法是在全局样式中统一设置，让所有元素都采用border-box计算方式：
*, *::before, *::after {
box-sizing: border-box;
}这行代码几乎是现代CSS项目的标配。设想一个常见场景：一个父容器宽度为100%，内部有两个各占50%宽度的子元素并排显示，如果给子元素加上1px的边框，在content-box下两个子元素的实际宽度就是50%加2px，总和超过100%，第二个元素会被挤到下一行；而在border-box下，边框被包含在50%以内，布局不会出错。
再比如表单开发中，输入框通常需要设置padding来改善视觉效果。如果使用默认的content-box，一个<input>元素设置width为100%后再加padding，很容易横向溢出父容器；切换为border-box后问题迎刃而解，这也是很多UI框架内部都采用border-box的原因。
还有一种特殊情况值得注意：嵌套布局中，如果某些第三方组件依赖content-box，盲目全局覆盖可能引发样式异常，此时可以针对特定元素单独设置box-sizing: content-box来还原。总的原则是：新项目统一使用border-box，维护老代码时先确认原有盒模型约定，避免混用导致尺寸混乱。
margin合并与负边距等进阶问题
掌握盒模型的尺寸计算后，还需要了解一些边界行为。最典型的是垂直方向上的margin合并：当两个块级元素上下相邻时，上方元素的margin-bottom与下方元素的margin-top不会叠加，而是取两者中的较大值作为实际间距。例如上面的元素margin-bottom为20px，下面的元素margin-top为30px，实际间距是30px而不是50px。父子元素之间也会发生margin穿透，子元素的margin-top可能表现为父元素的外边距。
解决办法有几种：给父元素设置border或padding、触发BFC（块级格式化上下文，例如设置overflow: hidden）、或者干脆用父元素的padding代替子元素的margin。
负margin也是盒模型的重要特性。水平方向设置负margin可以把相邻元素拉近甚至重叠，垂直方向的负margin则会让后续元素上移。经典的等高布局、双飞翼布局都借助了负margin的能力。此外，margin的auto值在弹性布局和普通块级布局中可以实现水平居中：margin: 0 auto配合固定宽度即可居中一个块级元素。
总的来说，盒子模型是CSS的基石概念。理解四层结构的含义、两种计算模式的差异，并养成统一使用box-sizing: border-box的习惯，就能避免绝大多数布局尺寸问题，编写出结构稳定、易于维护的页面。
CSS盒子模型box-sizingmargin和padding修改时间：2026-09-02 03:52:26