box-sizing: border-box使width/height包含padding和border，避免布局错位；全局启用应写**,*::before,*::after{box-sizing:border-box}并置于样式最前；仅极少数场景需content-box。
box-sizing: border-box 是什么效果
它让元素的 width 和 height 包含 padding 和 border，而不是只算内容区。比如设了 width: 200px; padding: 10px; border: 2px solid，最终占位还是 200px，不是 224px。
默认是 box-sizing: content-box，这也是很多人布局错位的根源——以为设了 200px 就是 200px 宽，结果 padding 一加就撑开了。
怎么全局启用 border-box
最稳妥的做法是在 CSS 开头加这条重置规则：
*,
*::before,
*::after {
box-sizing: border-box;
}
这样所有元素（包括伪元素）都统一行为，避免子元素漏设导致意外溢出。
- 别只写
* { box-sizing: border-box; }，::before和::after可能被忽略，尤其在用伪元素做装饰或清浮动时会出问题 - 不要只给某几个类加，维护成本高，容易漏；全局重置反而更可控
- 这条规则必须放在所有其他样式之前，否则可能被后续规则覆盖
哪些场景下 content-box 还得留着
极少数需要精确控制内容区域尺寸的场景，比如自定义滚动条轨道、canvas 容器、或某些 CSS-in-JS 库内部计算，仍依赖原始盒模型。
- 一般业务代码里几乎不需要主动切回
content-box - 如果真要覆盖，用
box-sizing: content-box显式声明，别靠“不设就默认”来赌 - 注意：重置后，老项目里用 JS 直接读取
offsetWidth的逻辑通常不受影响，但用getComputedStyle(el).width再减去padding推算内容宽的代码会失效
IE8 及更早版本的兼容性坑
box-sizing 在 IE8 中只支持带 -ms- 前缀的写法，且仅对块级元素生效；IE7 及以下完全不支持。
- 如果必须兼容 IE8，得补上：
-ms-box-sizing: border-box - 但前缀写法不能和标准写法混在一行用逗号分隔，必须分开写，否则 IE8 会忽略整条规则
- 现在绝大多数项目已放弃 IE8，但若接手老系统，看到布局在 IE8 错乱，先查这条是否漏了前缀
实际用的时候，最常被忽略的是伪元素没纳入重置，以及把 box-sizing 当成“可选优化”而不是基础布局前提——它不是锦上添花，而是防止盒子天天跑偏的底线设置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
