box-sizing: border-box 时 width 包含内容区、内边距和边框三者总和；默认 content-box 下 width 仅指内容区，padding 和 border 会额外增加总宽；全局设 border-box 需覆盖伪元素并注意旧库兼容性。
box-sizing: border-box 时 width 包含哪些部分
设置 box-sizing: border-box 后，元素的 width 指的是「内容区 + 内边距 + 边框」三者总和的最终占用宽度，padding 和 border 不再撑开容器，而是向内压缩内容区域。
比如：
div {
width: 200px;
padding: 20px;
border: 5px solid #333;
box-sizing: border-box;
}这个 div 最终在页面中占满正好 200px 宽，其中内容区实际只有 200 − 2×20 − 2×5 = 150px。
box-sizing: content-box（默认）下 width 的行为
这是浏览器默认值，width 仅代表内容区宽度，padding 和 border 都额外叠加在它外面——容易导致布局错位或溢出。
- 若同样写
width: 200px; padding: 20px; border: 5px，实际总宽是200 + 40 + 10 = 250px - 父容器设了
width: 200px，子元素用默认content-box+padding，很可能直接溢出 - 响应式中用百分比宽度时，
content-box下加padding会破坏预期比例
切换 box-sizing 影响布局的典型场景
最常踩坑的是重置样式不统一，或第三方组件未显式声明 box-sizing。
-
* { box-sizing: border-box }是现代 CSS 重置的标配，但要注意它不继承到伪元素（需额外写*::before, *::after） - Flex/Grid 容器里的子项即使设了
flex: 1，若内部用了content-box+ 大padding，仍可能挤占空间甚至换行 - 表单控件（如
input[type="text"]）在不同浏览器中默认box-sizing不一致，必须显式统一，否则横向对不齐
如何安全地批量切换盒模型
全局切到 border-box 很方便，但要注意两个隐藏细节：
立即学习“前端免费学习笔记（深入）”；
- 某些旧版库（如早期 Bootstrap 2）依赖
content-box行为，强行覆盖可能破坏其栅格计算 -
box-sizing不影响margin—— 它永远外置，无论哪种模型 - 动画或 JS 动态读取
offsetWidth时，值始终反映最终渲染宽度，与box-sizing设置一致，无需额外适配
推荐写法：
*,
*::before,
*::after {
box-sizing: border-box;
}这样能覆盖所有情况，包括伪元素生成的内容块。
真正麻烦的不是切换本身，而是混合使用：当部分组件坚持用 content-box，而你全局设了 border-box，又没加 !important 或 specificity 覆盖，就容易出现尺寸“突然变小”却查不出原因的情况。
