在css盒模型中，box-sizing属性决定了浏览器如何计算元素的宽度和高度。最常用的两个值是content-box和border-box，它们在尺寸计算规则上有明显不同，直接影响布局表现。
content-box与border-box的核心区别
content-box是css规范中默认的盒模型计算方式。当你为一个元素设置width为200px时，这个宽度仅代表内容区域的宽度，如果再加上padding和border，元素在页面上实际占据的宽度会是内容宽加内边距加边框宽。
border-box则改变这一规则。设置width为200px后，这200px已经包含了content、padding和border。也就是说，无论你怎么改padding或border，元素总宽度都固定在200px，内容区域会相应缩小。
用代码直观对比
下面两个div都声明了宽度200px、内边距20px、边框5px，但box-sizing不同：
<!DOCTYPE html>
<html>
<head>
<style>
.box-default {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 5px solid #333;
background: #f2f2f2;
}
.box-border {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid #333;
background: #d9edf7;
}
</style>
</head>
<body>
<div class="box-default">我是content-box</div>
<div class="box-border">我是border-box</div>
</body>
</html>
在上面的例子中，box-default实际宽度为200加40加10等于250px，而box-border始终为200px。
计算方式对照表
| 属性值 | 设定width含义 | 实际总宽度公式 |
|---|---|---|
| content-box | 仅内容区 | width + padding + border |
| border-box | 内容+内边距+边框 | width |
为什么推荐用border-box
在真实项目中，使用border-box能大幅降低布局复杂度。比如用百分比写栅格时，不用再手动减去padding。很多重置样式表会在最前面写：
* {
box-sizing: border-box;
}
这样所有元素都采用更直观的尺寸模型。不过要注意，表单控件如<input>在某些浏览器下默认不是border-box，必要时需单独设置。
小结
简单说，content-box让元素易“撑大”，border-box让尺寸可控。弄清box-sizing:border-box与content-box区别，能帮你写出更稳定的css布局。
cssbox-sizingborder-box修改时间：2026-07-31 05:18:16