<p>border-box 是现代布局标准，设 width: 200px 即总宽200px；content-box 下 width 仅指内容区，padding 和 border 额外增加，导致实际宽度超预期；全局启用需 * { box-sizing: border-box; }，但 margin 不受其影响。</p>
content-box 是浏览器默认行为，但 border-box 才是现代布局的实际标准；不切换它，你写的 width: 300px 就永远不是它最终占的宽度。
为什么设了 width: 200px 却撑出 234px？
这是 content-box 的典型表现：你声明的 width 只管内容区，padding 和 border 全部额外加在外部。比如：
.card {
width: 200px;
padding: 15px;
border: 2px solid #ccc;
box-sizing: content-box; /* 默认值，可省略 */
}它的实际总宽度 = 200 + 15×2 + 2×2 = 234px。这种“声明值 ≠ 占位值”的逻辑，在栅格对齐、并排布局、响应式断点里极易翻车。
- 用
flex并排两个width: 50%元素？加个padding就换行 - 设计师给的 375px 宽图稿，你写
width: 375px+1px边框 → 实际 377px，溢出滚动条 -
input元素没显式设box-sizing，不同浏览器默认行为还不一致
如何全局切换成 border-box？
一句话：在 CSS 入口（如 reset.css 或主样式表顶部）加这三行：
立即学习“前端免费学习笔记（深入）”；
*, *::before, *::after {
box-sizing: border-box;
}这样所有元素——包括伪元素——都按“你写的 width 就是它最终总宽度”来计算。上面那个例子换成 border-box 后：
- 总宽度严格 =
200px - 内容区自动压缩为
200 − 15×2 − 2×2 = 166px - 加
padding不撑开，改border不偏移，栅格稳如磐石
注意：* 选择器兼容 IE8+，移动端无任何顾虑；但老项目若存在 JS 直接读取 offsetWidth 并硬编码计算逻辑，需同步检查。
box-sizing: border-box 不能解决什么？
它只管 content、padding、border 三层，margin 始终游离在外——这是最容易被忽略的盲区。
下面这段代码依然会让容器水平溢出：
.card {
width: 300px;
box-sizing: border-box;
margin: 20px;
}因为 margin 不参与 box-sizing 计算，实际占用空间仍是 300px + 20px×2 = 340px。要控整体占位，margin 必须单独管理，不能指望 box-sizing 替你兜底。
另一个常见坑：混用第三方 UI 库（如 Ant Design、Element Plus）时，它们内部已设 border-box，而你自己写的组件沿用默认 content-box，同级排列时尺寸错位肉眼难察，调试得靠开发者工具盒模型面板逐个点开看。
