width: 100%不等于填满父容器总宽，因默认box-sizing: content-box下总宽=父content宽+自身padding+border；需用box-sizing: border-box修正，并通过computed面板验证生效，同时注意margin、伪元素、绝对定位及min-width: 0等协同影响。
因为浏览器默认用 box-sizing: content-box，此时 width: 100% 只管内容区宽度，padding 和 border 会额外加在它外面——总宽 = 父 content 宽 + 左右 padding + 左右 border，必然超限。
为什么 width: 100% 不等于“填满父容器总宽”
默认盒模型下，元素总宽度不是你写的那个 100%，而是：width（内容区） + padding-left + padding-right + border-left-width + border-right-width。哪怕父容器宽 300px、子设了 padding: 12px，实际就占了 300px + 24px = 324px。
更隐蔽的是：父容器自己若有 padding: 0 20px，它的 content 区只剩 260px；子写 width: 100% 就只占这 260px，再叠上自身 padding，又容易撑破。
怎么确认 box-sizing: border-box 真生效了
写了不等于起作用。必须进浏览器开发者工具，切到「Computed」面板，直接查目标元素的 box-sizing 值——这是唯一可信依据。
- 常见失效原因：其他样式规则优先级更高，覆盖了你的设置
- CSS-in-JS 库（如
styled-components）SSR 注入顺序错乱，首屏闪动 - 框架（如 Bootstrap）自己重写了
box-sizing，但没包含::before/::after，导致伪元素仍按content-box算
box-sizing: border-box 修好了，为什么还溢出
box-sizing 只影响 width/height、padding、border 的归属关系，对 margin 完全无效——它永远算在总尺寸之外。
- 如果溢出是因为
margin: 20px，加了border-box没用 - 绝对定位元素的
width: 100%是按父的 padding box 计算的（含父padding），不是 content box，这点容易误判尺寸 -
table和td默认无视box-sizing，必须显式声明才生效 - 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 > * - 所有用了
width: 100%+padding的自定义组件
微信 X5 内核（v3.7 以下）对 *::before、*::after 的重置支持不稳定，可兜底加一句 html { box-sizing: border-box; }。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
