box-sizing: content-box 是溢出的根源，浏览器默认采用该模型，使 width: 100% 仅控制内容区宽度，padding 和 border 额外叠加导致总宽超限；需通过开发者工具「computed」面板验证 box-sizing 值是否真实生效，并注意 margin、伪元素、替换元素及 bfc 等协同影响。
box-sizing: content-box 是溢出的根源
浏览器默认用 box-sizing: content-box，此时 width: 100% 只控制内容区宽度，padding 和 border 会额外加在它外面。比如父容器宽 300px、子元素设 width: 100% + padding: 12px + border: 1px，实际总宽就是 300px + 24px + 2px = 326px。
怎么确认 box-sizing: border-box 真生效了
写了不等于起作用。必须进开发者工具，切到「Computed」面板，直接查目标元素的 box-sizing 值——这是唯一可信依据。
- 常见失效原因：
Bootstrap等框架重置了box-sizing，但漏掉了::before/::after，导致伪元素仍按content-box算 -
CSS-in-JS库（如styled-components）SSR 注入顺序错乱，首屏闪动 - 其他样式规则优先级更高，覆盖了你的设置
border-box 修不好时，问题可能不在 box-sizing
box-sizing: border-box 只影响 width/height/padding/border 的归属关系，对 margin 完全无效——它永远算在总尺寸之外。
- 如果溢出是因为
margin: 20px，加了border-box没用 - 绝对定位元素的
width: 100%是按父的padding box计算的（含父padding），不是content box，容易误判尺寸 -
flex或grid子项若设了min-width: auto（img、input默认值），即使box-sizing正确，也得配min-width: 0才能防撑开
老项目不敢全局改 box-sizing 怎么办
可以精准控制，只加在高频出问题的地方：
-
input、textarea、select——它们自带浏览器默认padding和border，不显式重置几乎必溢出 -
.form-control、.card-content、.form-group > *这类明确需要100%宽 +padding的组件 - 别忘了伪元素：
*::before, *::after { box-sizing: border-box; }，否则插入的内容可能意外溢出
真正难处理的从来不是 box-sizing 本身，而是它和 min-width、margin、display 类型（比如 inline 图片）、甚至父容器是否创建 BFC 的组合效应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
