1. 引言
在 CSS 布局中，几乎每一个元素都会被渲染成一个矩形盒子。理解这个盒子的尺寸是如何计算出来的，是掌握布局的第一步。而 box-sizing 属性，正是控制「宽高到底算到哪一层」的关键开关。本文从盒子模型的结构讲起，逐步推导尺寸计算公式，并给出 box-sizing 的实战用法与常见坑点。
2. 盒子模型的结构
一个标准盒子由内到外分为四层：
- content（内容区）：真正放置文字、图片的区域，由
width/height描述。 - padding（内边距）：内容与边框之间的留白。
- border（边框）：盒子的边界线。
- margin（外边距）：盒子与其他盒子之间的间隔，不参与盒子自身尺寸，但影响占位。
可以用一张图直观表示：
3. 尺寸计算公式
3.1 默认情况：content-box
box-sizing 的默认值是 content-box，此时 width / height 只描述内容区，盒子实际占据的尺寸需要把 padding 和 border 加上：
盒子总宽度 = width + padding-left + padding-right + border-left + border-right
盒子总高度 = height + padding-top + padding-bottom + border-top + border-bottom
举例：
.box {
width: 200px;
height: 100px;
padding: 10px;
border: 2px solid #333;
}
计算过程：
总宽度 = 200 + 10 + 10 + 2 + 2 = 224px
总高度 = 100 + 10 + 10 + 2 + 2 = 124px
也就是说，你写了 width: 200px，元素实际却占了 224px，这正是很多布局「溢出」的根源。
3.2 改为 border-box
设置 box-sizing: border-box 后，width / height 包含 padding 和 border，内容区会被自动压缩：
内容区宽度 = width - padding-left - padding-right - border-left - border-right
内容区高度 = height - padding-top - padding-bottom - border-top - border-bottom
同样的样式，加上 box-sizing: border-box 后：
总宽度 = 200px（内容区 = 200 - 20 - 4 = 176px）
总高度 = 100px（内容区 = 100 - 20 - 4 = 76px）
此时元素占据的尺寸与声明值一致，布局计算更符合直觉。
3.3 两种模式对比
| 属性值 | width 的含义 | 实际占宽 | 内容区宽度 |
|---|---|---|---|
content-box | 内容区宽度 | 224px | 200px |
border-box | 边框盒宽度 | 200px | 176px |
4. box-sizing 的取值与继承
box-sizing 有两个常用取值：
content-box：默认值，标准盒子模型。border-box：IE 怪异模式下的计算方式，现已成为主流选择。
它不是继承属性，但可以通过通配符统一设置：
*,
*::before,
*::after {
box-sizing: border-box;
}
这是目前绝大多数项目的标准做法，能避免大量手动加减 padding 的麻烦。
5. 实战示例
5.1 两栏等宽布局
假设容器宽 1000px，两栏各占 50%，并带 10px 内边距：
.container {
display: flex;
width: 1000px;
}
.item {
width: 50%;
padding: 10px;
border: 1px solid #ddd;
box-sizing: border-box;
}
在 border-box 下，两栏各 500px，padding 与 border 向内挤压，不会撑破容器。若换成 content-box，每栏实际宽度变成 500 + 20 + 2 = 522px，两栏合计 1044px，直接溢出。
5.2 输入框与按钮对齐
表单中 input 与 button 常因默认 box-sizing 不同而高度不一致，统一设置后即可对齐：
input,
button,
textarea,
select {
box-sizing: border-box;
height: 36px;
padding: 0 12px;
border: 1px solid #ccc;
}
6. 常见坑点
- 百分比宽度 + padding：在
content-box下，width: 100%再加 padding 必然溢出，改用border-box或calc()解决。 box-sizing不影响 margin：无论哪种模式，margin 始终在盒子外部，不参与width计算。min-width/max-width同样受 box-sizing 影响：border-box下它们约束的是边框盒尺寸。- 替换元素（img、video）：
box-sizing对它们同样生效，但图片的固有宽高比可能导致内容区被拉伸，需配合object-fit。 - 第三方组件覆盖：引入 UI 库时，其内部可能重置
box-sizing，注意检查层叠顺序。
7. 总结
box-sizing 决定了 width / height 的计量边界：content-box 只算内容区，border-box 算到边框外沿。理解两者的换算关系，就能准确预测元素的实际占位，避免布局溢出与对齐错位。实践中推荐全局设置 box-sizing: border-box，让尺寸声明与视觉结果保持一致。
转载自 CSDN-专业IT技术社区
原文链接：https://blog.csdn.net/2601_96876853/article/details/169952041
