默认box-sizing为content-box时，width仅指内容区宽度，padding和border会额外增加尺寸；全局启用border-box需用、::before、*::after及html双重声明，但canvas等组件和第三方库可能需例外处理。
为什么 padding 会让 div 变大
默认情况下，box-sizing 是 content-box：你写的 width: 200px 指的是内容区宽度，padding 和 border 会额外加在它外面。结果就是——明明设了 200px，实际占位可能 220px（+10px 左右内边距 ×2）。
这不是 bug，是 CSS2.1 的原始设计逻辑，但和直觉冲突，尤其做栅格、卡片、表单控件时容易错位。
全局启用 border-box 的正确写法
用通配符 + html 根元素双重保障，覆盖所有情况（包括伪元素、第三方组件内部节点）：
*, *::before, *::after {
box-sizing: border-box;
}
html {
box-sizing: border-box;
}
注意两点：
立即学习“前端免费学习笔记（深入）”；
-
*本身不匹配伪元素，所以必须显式加上*::before和*::after -
html单独声明，是为了防止某些浏览器（如旧版 Safari）对根元素的box-sizing忽略继承 - 别用
body替代html——body可能有 margin，且不是所有元素都继承自它
哪些地方不能依赖全局 border-box
有些场景下，强行统一反而坏事：
- 需要精确控制内容区尺寸的 UI 组件（比如 canvas、video、textarea 的内部渲染逻辑），改了
box-sizing可能导致文字截断或缩放异常 - 使用了 inline-size / block-size 的现代布局中，
border-box行为和传统 width/height 不完全等价，尤其配合resize或scrollbar-gutter时 - 第三方库（如某些 UI 框架的 modal、tooltip）内部 hardcode 了
content-box计算，全局覆盖后需手动重置其容器
检查是否生效的快速方法
打开开发者工具，选中任意元素，在 Styles 面板里搜 box-sizing，看是否显示为 border-box 且来源是你的全局规则（而不是被 later 规则覆盖）。
更可靠的是写一行测试：
<div style="width: 100px; padding: 20px; border: 5px solid red;">test</div>
如果这个 div 在页面上实际宽度仍是 100px（不是 150px），说明生效了。
真正麻烦的不是设置，而是团队协作时有人在局部样式里又写回 box-sizing: content-box，还忘了加 !important 或注释——这种隐性覆盖，得靠代码审查和 CI 中的 CSS lint 规则来兜底。
