box-sizing: border-box使width/height包含padding和border，避免布局溢出；推荐全局设为*, *::before, *::after { box-sizing: border-box; }，但表单控件等需谨慎；局部恢复content-box需提高选择器优先级。
box-sizing: border-box 是什么，为什么需要它
它让 width 和 height 指代的是“整个盒子”的尺寸，而不是只算内容区域。默认的 content-box 模式下，加个 padding: 10px 和 border: 2px solid，元素实际占宽会变成 width + 20px + 4px，容易导致布局撑出、换行或响应式错位。
用 border-box 后，这些额外部分被“压缩进”设定的宽高里，更符合直觉，也更贴近早期 IE 的“怪异模式”行为（但这是标准支持的、可控的）。
全局启用 border-box 的正确写法
最稳妥的方式是用通配符重置，但要注意优先级和继承性限制：
-
* { box-sizing: border-box; }简单直接，但可能影响 SVG、表单控件等原生行为 - 更推荐：
*, *::before, *::after { box-sizing: border-box; }—— 覆盖伪元素，避免某些场景下伪元素仍走content-box - 如果已有第三方样式（如 Bootstrap 或重置库），需确保该规则在它们之后加载，或提高权重：
html * { box-sizing: border-box !important; }（仅调试时临时用）
哪些地方不能盲目套用 border-box
不是所有元素都适合统一设为 border-box：
立即学习“前端免费学习笔记（深入）”；
-
<textarea></textarea>、<input type="text">等表单控件在某些旧版浏览器中对box-sizing支持不稳定，建议单独控制而非依赖通配符 - 使用
background-clip: content-box或border-image的场景，border-box本身不影响这些属性，但尺寸逻辑变化后可能让视觉边界与预期不一致 - 通过 JS 动态读取
offsetWidth/getBoundingClientRect()并做计算的代码，若原先按content-box逻辑编写，切换后需同步检查是否需调整
覆盖 border-box：想局部切回 content-box 怎么写
因为 box-sizing 不继承，所以不能靠父级设置来“传递”，必须显式重写：
- 错误写法：
.legacy { box-sizing: content-box; }—— 如果前面有* { box-sizing: border-box; }，这条会被覆盖（同优先级时后者胜出） - 正确做法：提升选择器优先级，例如
div.legacy, .legacy-input { box-sizing: content-box; } - 或者用内联样式强制（仅限极少数动态场景）：
<div style="box-sizing: content-box"> <li>注意：不要依赖 <code>inherit，因为根元素html默认是content-box，但通配符已覆盖，子元素不会自动“继承”原始值
真正麻烦的不是设 border-box，而是设了之后忘了它对所有后续尺寸计算的隐性影响——比如一个 width: 100% 的容器，里面嵌套了带 padding 的子元素，在 border-box 下依然能严丝合缝，但换成 content-box 就立刻溢出。这种差异往往只在改版或接入老组件时才暴露出来。
