CSS盒模型是网页布局的核心基础，每个HTML元素都可以看作是一个矩形的盒子，这个盒子由内容区域、内边距、边框、外边距四个部分组成。其中内容区域的大小直接由content width和content height决定，而padding和border的设置会直接影响整个盒子的最终尺寸，也会影响内容区域的实际可展示范围。
CSS盒模型的基本组成
一个完整的CSS盒模型从内到外依次包含四个部分：
- 内容区域：由width和height属性定义，用来展示元素内部的文本、图片等内容，也就是我们常说的content width对应的区域。
- 内边距（padding）：内容区域到边框之间的空白区域，用来分隔内容和边框，不会显示内容，但可以设置背景色。
- 边框（border）：包裹在内边距外面的线条，用来界定元素的边界，可以设置宽度、样式和颜色。
- 外边距（margin）：边框外部的空白区域，用来分隔相邻的元素，不会影响元素自身的尺寸。
标准盒模型下的尺寸计算规则
标准盒模型是CSS的默认盒模型，在这种模式下，我们设置的width属性值仅代表内容区域的宽度，整个盒子的最终宽度需要加上padding和border的宽度。对应的计算公式如下：
盒子总宽度 = content width + 左padding + 右padding + 左border + 右border
盒子总高度 = content height + 上padding + 下padding + 上border + 下border
也就是说，如果我们给元素设置了width为200px，同时设置了左右padding各20px，左右border各2px，那么整个盒子的总宽度就是200 + 20*2 + 2*2 = 244px，而内容区域的宽度仍然是200px。
下面通过一个代码示例来验证这个规则：
/* 标准盒模型示例 */
.standard-box {
/* 标准盒模型是默认值，不需要额外设置，也可以显式声明 */
box-sizing: content-box;
width: 200px;
height: 100px;
padding: 20px;
border: 2px solid #333;
background-color: #f0f0f0;
}
<div class="standard-box">
这是标准盒模型的内容区域，我设置的width是200px，但是加上padding和border之后，整个盒子会更宽
</div>
运行上面的代码，通过浏览器的开发者工具查看元素，会发现内容区域的宽度确实是200px，整个盒子的总宽度是244px，和之前的计算公式结果一致。
怪异盒模型下的尺寸计算规则
怪异盒模型也叫IE盒模型，在这种模式下，我们设置的width属性值代表的是整个盒子的最终宽度，内容区域的宽度会自动减去padding和border的宽度。对应的计算公式如下：
content width = 设置的width - 左padding - 右padding - 左border - 右border
盒子总宽度 = 设置的width
还是上面的例子，如果设置width为200px，左右padding各20px，左右border各2px，那么内容区域的宽度就是200 - 20*2 - 2*2 = 156px，整个盒子的总宽度就是200px。
通过代码来演示怪异盒模型的效果：
/* 怪异盒模型示例 */
.weird-box {
/* 设置为怪异盒模型 */
box-sizing: border-box;
width: 200px;
height: 100px;
padding: 20px;
border: 2px solid #333;
background-color: #f0f0f0;
}
<div class="weird-box">
这是怪异盒模型的内容区域，我设置的width是200px，但是内容区域宽度会被padding和border挤压，整个盒子总宽度保持200px
</div>
运行代码后查看元素，会发现整个盒子的总宽度是200px，内容区域的宽度是156px，符合怪异盒模型的计算规则。
content width与padding、border的关系总结
两种盒模型下，content width和padding、border的关系可以总结为：
| 盒模型类型 | width属性含义 | content width计算方式 | 盒子总宽度计算方式 |
|---|---|---|---|
| 标准盒模型（content-box） | 仅代表内容区域宽度 | 等于设置的width值 | width + padding左右 + border左右 |
| 怪异盒模型（border-box） | 代表盒子总宽度 | width - padding左右 - border左右 | 等于设置的width值 |
在实际开发中，如果希望设置的宽度就是元素最终占用的宽度，避免padding和border影响布局，通常会全局设置怪异盒模型：
/* 全局设置怪异盒模型，避免尺寸计算问题 */
* {
box-sizing: border-box;
}
这样设置之后，所有元素的width都会代表盒子总宽度，内容区域会自动适配padding和border的大小，布局时尺寸计算会更符合直觉，减少因为盒模型规则不熟悉导致的布局错误。
常见问题解答
为什么我设置了width之后，元素还是超出了父容器？
这种情况大多是因为使用了标准盒模型，同时给元素设置了padding或者border，导致盒子总宽度超过了父容器的宽度。解决方法可以是切换到怪异盒模型，或者调整width的值，减去padding和border的宽度。
外边距会影响内容区域的大小吗？
不会，外边距是用来分隔相邻元素的，不会影响元素自身的盒子尺寸，也不会影响内容区域的大小，只会影响元素在页面中的位置。
行内元素的盒模型有什么不同？
行内元素的width和height设置是无效的，内容区域的宽度由内容本身决定，padding和border可以正常设置，但是垂直方向的padding和border不会影响行高，可能会和其他行的内容重叠。
CSS盒模型content_widthpaddingborder盒模型计算规则修改时间：2026-06-14 23:12:39