box-sizing: border-box 能解决边框撑开宽度问题，因其使 width/height 包含 content、padding 和 border；默认 content-box 仅限内容区，加 padding/border 后总宽超预期，如 width: 200px; padding: 10px; border: 2px 实际宽为 224px。
直接改 box-sizing 就能解决，但必须确保它真正生效——很多人加了却没效果，是因为优先级或继承规则被忽略了。
为什么 box-sizing: border-box 能解决问题
默认的 box-sizing: content-box 会让 width 和 height 只算内容区，border 和 padding 额外往外撑。比如设 width: 200px; padding: 10px; border: 2px solid，实际占宽是 200 + 2×10 + 2×2 = 224px。
border-box 则把 border 和 padding 包进设定的宽高里，上面例子中无论 padding 多大、border 多粗，总宽始终是 200px。
全局设置时最容易失效的三个地方
- 没加
* { box-sizing: border-box; }，只写了html或body—— 元素不继承box-sizing，必须用通配符或重置所有块级/表单元素 - 第三方库（如 Bootstrap、Element Plus）的 CSS 后加载，覆盖了你的通配符规则 —— 把你的
*规则放到<link>引入外部样式表之后，或加!important（慎用，仅调试） - 内联样式或
[style]属性里写了box-sizing: content-box—— 浏览器内联样式的优先级高于*，得用更具体的 selector 覆盖，比如div, input, textarea { box-sizing: border-box !important; }
推荐的写法与兼容性注意点
最稳妥的全局写法：
*,
*::before,
*::after {
box-sizing: border-box;
}
这样连伪元素的尺寸也统一控制，避免某些场景下（如绝对定位 + inset + border）又出现意外溢出。
兼容性方面：box-sizing 在 IE8+、所有现代浏览器都支持，但注意：
- IE8 不支持
*::before和*::after的写法，若需兼容 IE8，单独写*:before, *:after（冒号单个） - 旧版 Safari（-webkit-box-sizing 前缀，现在基本可忽略
- Flex/Grid 容器子项即使没设
box-sizing，其尺寸计算逻辑也已按border-box类似方式处理，但显式声明仍是最佳实践
真正要盯住的，不是“有没有写”，而是“有没有被覆盖”和“伪元素是否漏掉”。很多撑破问题，查到最后都是某个 input 或 textarea 没被 * 捕获到，或者用了 UI 库的 scoped style 把你的全局规则隔离了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
