在css布局中，盒模型决定了元素在页面上占据的空间。默认状态下浏览器使用content-box模式，此时我们写的width和height只代表内容区大小，如果再加上padding和border，元素实际占用的宽度会变成内容区加内边距加边框，这就导致内容区与边框区尺寸对不上，布局容易出现错位或溢出。
为什么内容区和边框区对不上
标准盒模型下，一个元素的所占宽度计算公式如下：
- 总宽度 = width + padding-left + padding-right + border-left + border-right
- 总高度 = height + padding-top + padding-bottom + border-top + border-bottom
假设设置width为200px，左右各10px内边距，左右各1px边框，那么元素实际宽度是222px，但内容区仍是200px，视觉上边框区比预期更靠外，造成对不齐的感觉。
使用box-sizing统一计算方式
css提供了box-sizing属性，用来改变盒模型的计算规则。将其设为border-box后，设定的width和height会包含内容、内边距和边框，元素总尺寸就等于你写的宽高，内部空间自动压缩。
基础写法
/* 单个元素使用 */
.box {
width: 200px;
padding: 10px;
border: 1px solid #333;
box-sizing: border-box;
}
全局统一设置
为了避免每个元素都写一遍，通常会在样式开头统一设置所有元素：
/* 推荐使用通配符统一盒模型 */
* {
box-sizing: border-box;
}
.container {
width: 300px;
padding: 20px;
border: 2px solid #06f;
/* 此时内容区自动变为 300 - 40 - 4 = 256px */
}
border-box下的尺寸对照
以下表格展示同样样式在两种模式下的差异：
| 模式 | 设定width | padding | border | 实际总宽 | 内容区宽 |
|---|---|---|---|---|---|
| content-box | 200px | 10px*2 | 1px*2 | 222px | 200px |
| border-box | 200px | 10px*2 | 1px*2 | 200px | 178px |
实际开发建议
在项目初期就通过box-sizing: border-box统一盒模型，可以显著降低布局计算复杂度。需要注意，有些第三方组件库可能依赖content-box，引入时要检查是否冲突。如果必须混用，可以给特定模块单独声明box-sizing覆盖全局规则。
记住：border-box让宽度和高度变成“对外承诺尺寸”，不管里面怎么加边框内边距，元素都不会超出你给的盒子大小。
小结
内容区与边框区尺寸对不上，根源是默认content-box只算内容。改用box-sizing: border-box，就能让设定宽高统一包含边框和内边距，布局更可控，也更符合大多数人的直觉。
css_box_sizingborder-box盒模型修改时间：2026-07-30 14:18:21