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：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• 、 等表单控件在某些旧版浏览器中对 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; }
• 或者用内联样式强制（仅限极少数动态场景）：
• 注意：不要依赖 inherit，因为根元素 html 默认是 content-box，但通配符已覆盖，子元素不会自动“继承”原始值

真正麻烦的不是设 border-box，而是设了之后忘了它对所有后续尺寸计算的隐性影响——比如一个 width: 100% 的容器，里面嵌套了带 padding 的子元素，在 border-box 下依然能严丝合缝，但换成 content-box 就立刻溢出。这种差异往往只在改版或接入老组件时才暴露出来。