box-sizing 的最终生效值需以「computed」面板为准，若为 content-box，则 width: 100% 不包含 padding 和 border；常见干扰源包括表单元素默认样式、框架覆盖、伪元素未重置、父容器 padding 及 flex/grid 下 min-width: auto 等。
box-sizing 还是 content-box？先看 computed 值
不是写了 box-sizing: border-box 就生效了。框架、重置样式、父级继承都可能覆盖它。打开开发者工具，切到「Computed」面板，直接查 box-sizing 的最终值——如果显示 content-box，那 width: 100% 就一定包含 padding 和 border 在外，总宽必然超。
常见干扰源：
-
<input>、<textarea></textarea>等表单元素自带 padding，浏览器默认样式没被重置 - Bootstrap 或 Tailwind 等框架可能在局部覆盖了你的设置
- 只写了
* { box-sizing: border-box; }，但漏了伪元素：*::before, *::after仍为content-box
父容器有 padding，子元素 width: 100% 本来就不顶边
width: 100% 是相对于父元素的 content 区计算的。如果父容器设了 padding: 0 20px，它的 content 宽度就比总宽度少 40px；子元素 width: 100% 只填满这 260px（假设父总宽 300px），再加自己的 padding: 12px，总宽变成 284px —— 表面没溢出，但左右各空 16px，视觉上“没撑满”。
这时候得判断设计意图：
- 要对齐父容器边框 → 改用
width: calc(100% + 40px)（不推荐，响应式难维护） - 要对齐父内容区 → 保持
width: 100%，但把留白交给父容器的padding统一控制 - 要子元素真·满宽 → 父容器去掉
padding，改用子元素内层嵌套容器来留白
用了 flex/grid，min-width: 0 没配，box-sizing 也救不了
flex item 默认 min-width: auto（尤其 <img>、<input>），哪怕你写了 box-sizing: border-box，它仍会拒绝收缩，padding 一加就撑破父容器。
必须显式加：
- flex 子项：
min-width: 0 - grid 子项（尤其
grid-template-columns: 1fr）：min-width: 0 - 如果父容器是
display: flex且子项有width: 100%，这两者缺一不可
误用 100vw 却加了 padding
width: 100vw 是按视口宽度算的，和父容器无关。加了 padding: 20px 后，总宽 = 视口宽 + 40px → 必然水平溢出，哪怕 box-sizing: border-box 也拦不住。
正确做法：
- 想填满父容器 → 改用
width: 100%，并确保父容器有明确宽度（比如body或html设了width: 100%） - 真要基于视口 → 删掉 padding，改用
margin或内部嵌套一层容器来留白 - 硬要用
100vw+ 内边距 → 得写width: calc(100vw - 40px)，但 viewport 变化时需同步调整，维护成本高
真正容易被忽略的是：即使所有 box-sizing 都对了，只要父容器有 padding，子元素的 width: 100% 就不是“占满父总宽”，而是“占满父内容区”——这个语义差异，得靠设计意图反推该不该动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
