box-sizing 是控制 width/height 计算范围的属性，默认 content-box 仅含内容，border-box 包含 padding 和 border；全局推荐 、::before、*::after 设为 border-box；content-box 适用于第三方组件兼容、设计稿像素还原及 resize 场景；margin 不受其影响。
box-sizing 是控制“宽度到底算到哪”的开关
它决定你写的 width: 200px 到底指内容区宽，还是整个盒子（含 padding + border）的宽。默认是 content-box，也就是“只管内容”，但加了 padding 和 border 后，元素实际会撑到 200px + 左右内边距 + 左右边框——这在栅格、Flex 或响应式布局里极易导致溢出或错位。
全局启用 border-box 的标准写法
国内主流项目都直接重置所有元素为 border-box，一劳永逸避免手动计算。关键不是“要不要用”，而是“怎么加才不漏”：
- 必须覆盖伪元素：
*::before和*::after也参与布局，漏掉会导致 ::before 生成的内容尺寸异常 - 不能只写
*：某些老框架（如部分 Bootstrap 版本）会重置部分元素的box-sizing，靠继承可能失效 - 兼容性无需额外前缀：IE8+、所有现代浏览器原生支持
box-sizing，-moz-或-webkit-前缀已成历史
*,
*::before,
*::after {
box-sizing: border-box;
}
content-box 还有啥场景非用不可？
极少数情况你得主动切回 content-box，比如：
- 封装第三方 UI 组件时，对方 CSS 显式设了
box-sizing: content-box，且你无法修改源码，强行全局重置可能破坏其内部尺寸逻辑 - 做像素级还原设计稿时，设计师给的标注是“内容区宽 120px，再加 8px padding、2px border”，此时保持默认行为反而更贴合交付要求
- 用
resize: both手动拖拽调整区域大小时，border-box下拖出来的尺寸包含边框，视觉反馈不如content-box直观
容易被忽略的坑：margin 不受 box-sizing 影响
box-sizing 只管 width/height 怎么算，margin 始终在盒子外部，和它完全无关。常见误判：
立即学习“前端免费学习笔记（深入）”；
- 以为设了
box-sizing: border-box就能“无视所有尺寸干扰”，结果margin: 10px依然会让两个并排元素之间多出 20px 间隙 - 在 Flex 容器中对子项设
margin-right做间隔，却忘了最后一项不该有右 margin，此时box-sizing再好也救不了布局错位 - 调试时盯着
width和padding看半天，最后发现是margin-top和父容器发生了外边距合并（collapsing margin）
真正要盯住的，从来不是 box-sizing 本身，而是你心里那条“宽度预期线”——它画在哪，决定了你该用 content-box 还是 border-box，也决定了你是否在用 margin 做本该由 padding 或 gap 解决的事。