17370845950

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 解决的事。