box-sizing 默认值是 content-box，即 width/height 仅指内容区，总宽度=width+左右padding+左右border；它不影响 margin，无法解决外边距合并、父容器塌陷或 Flex 布局中 width 失效等问题。
box-sizing 默认值是 content-box
不是你直觉里“设了 200px 就占 200px”的那个盒子，而是只管内容区的“窄盒子”。浏览器一上来就按这个规则算尺寸：你写的 width: 200px 和 height: 50px，仅指内容区域的宽高，padding 和 border 是额外加在外面的，margin 更是完全不参与计算。
content-box 下的实际宽度怎么算？
公式很简单：元素总宽度 = width + 左右 padding + 左右 border。比如：
.card {
width: 200px;
padding: 12px 16px;
border: 2px solid #ccc;
}它的实际渲染宽度是 200 + 16×2 + 2×2 = 236px——比你写的宽了 36px。这在栅格布局、Flex 并排、或固定容器内极易导致溢出、换行、滚动条意外出现。
为什么不能只靠 box-sizing: border-box 一招解百病？
box-sizing 只影响 width/height 的解释方式，它对 margin 完全没作用。很多人以为设了 border-box 就万事大吉，结果还是被以下问题卡住：
立即学习“前端免费学习笔记（深入）”；
- 相邻块级元素的
margin-top和margin-bottom合并（collapsing），比如一个margin-bottom: 24px的段落后面接一个margin-top: 16px的标题，实际间距只有24px，不是40px - 父元素没
padding或border，子元素的margin-top会“顶穿”父容器上边缘，造成父容器高度塌陷 - Flex 子项写了
width: 100px却不生效——因为flex-basis才是主轴初始尺寸，width在 flex 布局中只是 fallback
全局设置 border-box 的安全写法
别只写 * { box-sizing: border-box; }，伪元素也要覆盖，否则 ::before 插入的内容可能尺寸错乱：
*, *::before, *::after {
box-sizing: border-box;
}这条规则现代浏览器（IE8+）原生支持，无需 -webkit- 或 -moz- 前缀；但要注意，它不继承，所以必须显式命中所有目标节点。如果项目要兼容极老环境（如 IE7），需单独处理，不过 2026 年基本可忽略。
真正容易被忽略的，是把 box-sizing 当成“尺寸保险丝”——它修不了 margin 合并，也压不住 Flex 的自动拉伸。你得清楚自己是在控制“盒子边界”，还是在协调“盒子之间关系”。
