<p>必须写成 , ::before, *::after { box-sizing: border-box; } 并置于所有样式之前，且需显式重置 input、select、textarea、button 等表单控件，因 UA 样式权重高、部分浏览器不认通配符覆盖，伪元素和 SVG 不受其影响。</p>
直接用 * { box-sizing: border-box; } 不够——它漏掉伪元素，且对表单控件无效；必须写成 * , *::before, *::after { box-sizing: border-box; }，并放在所有自定义样式之前。
为什么 * 单独设置会失效
很多项目开头只写 * { box-sizing: border-box; }，结果发现 input、textarea 还是撑出滚动条，或者 button 和 div 并排高度不齐。这不是 bug，是浏览器 UA 样式在“打架”：
- 旧版 Safari 和部分 Android WebView 对
input、select等控件用了!important强制box-sizing: content-box -
*::before和*::after生成的内容默认走content-box，比如用伪元素做装饰边框时，尺寸会悄悄溢出 - 如果这条规则写在第三方 UI 库（如 Ant Design）样式之后，就会被覆盖
表单控件必须单独重置
即使你写了完整的通配符规则，input、select、textarea、button 仍可能不生效。原因很实在：UA 样式权重高，且某些浏览器根本不认通配符对它们的覆盖。
- 必须显式声明：
input, select, textarea, button { box-sizing: border-box; } - 这个选择器比
*权重高，能压过 UA 的!important - 不加
button容易忽略：它默认content-box，设了padding就会比同级div高 2px - 别用
form *替代——它无法命中input的 UA 样式，也不如直接选中可靠
全局设置后，旧代码要手动校准
box-sizing: border-box 改的是计算逻辑，不是自动帮你修复数值。原来靠“多留内容宽度抵 padding”的写法，在 border-box 下反而会让内容区被压缩到不合理大小。
立即学习“前端免费学习笔记（深入）”；
- 比如旧写法：
width: 200px; padding: 10px;（意图让内容区宽 180px），现在应明确写成width: 200px; padding: 10px;，内容区就是 180px —— 但如果你本意是“总宽 200px + 内边距”，那实际就窄了 - 用
calc()扣边框时注意空格：width: calc(100% - 2px);✅，calc(100%-2px)❌（部分旧 WebView 静默失败） -
border必须写全：border: 1px solid #ccc，只写border: 1px可能继承错误的颜色或样式，导致实际边框宽度不可控
SVG 和 Flex/Grid 中的边界情况
box-sizing 对 SVG 元素完全无效——<rect>、<circle> 永远按 content-box 解析尺寸，不能靠 CSS 重置。
- Flex 项优先看
flex-basis，不是width；设了flex: 1后再写width: 100%，往往被忽略 - Grid 中混用
fr和带padding的固定宽（如200px），容易触发隐式min-content计算，列宽被压缩，不是box-sizing能解决的 - 第三方组件库（如 Element Plus）可能用
!important锁死box-sizing: content-box，得用更强选择器覆盖，比如.el-input input { box-sizing: border-box !important; }
