box-sizing 是控制 width/height 计算范围的开关：content-box 仅含内容区，border-box 包含 padding 和 border；全局设 border-box 可避免布局溢出，但需覆盖伪元素，且 margin 始终不受影响。
box-sizing 是控制 width/height “算到哪”的开关
它不改变元素的视觉结构，只改你写的 width: 200px 到底指什么：是纯内容区宽，还是整个盒子（含 padding + border）的宽。默认 content-box 下，加个 padding: 10px 和 border: 2px，实际占位就变成 224px；而 border-box 下，它就老老实实卡在 200px，内容区自动收缩腾出空间。
为什么全局设 border-box 是国内主流实践
因为栅格、Flex、Grid 布局全靠“设定即所得”。比如两个 width: 50% 的子项，若没设 border-box，哪怕只加 1px 边框，就会撑出父容器——调试时满屏 overflow，根源常在这里。
- 必须覆盖伪元素：
*::before, *::after也参与布局，漏掉会导致伪元素尺寸错乱（比如图标或装饰线偏移） - 不能只写
*：某些旧版 UI 库（如 Bootstrap 3）会显式重置部分元素的box-sizing，靠继承会失效 - 现代浏览器无需前缀：
IE8+、Chrome 5.1+、所有新版 Safari/Firefox 原生支持，-webkit-或-moz-已成历史
*,
*::before,
*::after {
box-sizing: border-box;
}
什么时候非得切回 content-box
不是所有场景都适合一刀切。以下情况建议局部覆盖：
- 集成第三方组件（如某富文本编辑器），其内部样式强依赖
content-box，全局重置会破坏边框对齐或拖拽手柄尺寸 - 像素级还原设计稿时，标注明确写“内容区 120px + padding 8px + border 2px”，保持默认行为反而省去换算
- 用
resize: both手动拉伸区域，content-box下拖出来的数值直观对应内容区变化，用户感知更清晰
最容易被忽略的坑：margin 和 box-sizing 完全无关
box-sizing 只管 width/height 怎么算，margin 始终在盒子外部。常见误判：
立即学习“前端免费学习笔记（深入）”；
- 以为设了
border-box就能“无视尺寸干扰”，结果margin: 10px还是让两列之间多出 20px 间隙 - 在 Flex 容器里用
margin-right隔开子项，忘了最后一项不该有右 margin，此时再好的box-sizing也救不了布局错位 - 调试时死盯
width和padding，最后发现是margin-top和父容器发生了外边距合并（collapsing margin）
真正要盯住的，是你心里那条“宽度预期线”——它画在哪，决定了该用 content-box 还是 border-box，也决定了你是否在用 margin 做本该由 padding 或 gap 解决的事。
