根本原因是默认box-sizing: content-box，width: 100%仅指内容区宽度，padding和border额外叠加导致总宽超视口；需设box-sizing: border-box并验证computed值，同时排查body margin、图片max-width、white-space等隐性溢出源。
width: 100% 超出屏幕，不是 CSS 写错了，是浏览器按 box-sizing: content-box 算总宽——width 只管内容区，padding 和 border 额外叠加，多出的像素直接撑破视口。
为什么 width: 100% 在有 padding 时必溢出
默认盒模型下，元素总宽度 = width + 左右 padding + 左右 border。比如父容器 content 区宽 375px（常见移动端宽度），子元素设 width: 100%、padding: 16px、border: 1px，实际占宽就是 375px + 32px + 2px = 409px，远超视口。
更隐蔽的是：body 默认有 margin: 8px，整个页面先凭空多出 16px 总宽；再叠加上某个子元素的 padding，横向滚动条就出来了。
- 哪怕只多出 1px，
overflow-x: visible（默认）也会强制显示滚动条 - 移动端尤其敏感，小屏下 1px 溢出都可能触发地址栏重绘错位
-
input、textarea等表单元素自带浏览器默认padding和border，不显式重置就几乎必溢出
怎么确认 box-sizing: border-box 真生效了
写了不等于起效。必须进开发者工具，切到「Computed」面板，查目标元素的 box-sizing 值——这是唯一可信依据。
常见失效原因：
- 第三方 UI 库（如 Ant Design）或重置样式里用了更高优先级的选择器，覆盖了你的
box-sizing - CSS-in-JS 库（如 styled-components）SSR 注入顺序错乱，首屏闪动，重置样式没抢在组件样式前加载
- 伪元素漏掉：
*::before、*::after若也设了width: 100%和padding，但没加box-sizing: border-box，照样悄悄撑宽布局 - 微信 X5 内核（v3.7 以下）对伪元素重置支持不稳定，可兜底加
html { box-sizing: border-box; }
全局重置 box-sizing 的实操写法与边界
最稳写法是：
*, *::before, *::after {
box-sizing: border-box;
}
这不是“建议”，是现代项目起步标配。但要注意它不解决所有溢出：
-
margin完全不受box-sizing控制——如果溢出是因为margin: 20px，加了border-box也没用 - 绝对定位元素：
position: absolute下width: 100%是按父元素的 padding box（含父padding）计算的，行为和普通流不同 - table 和
td默认无视box-sizing，必须显式声明才生效 - flex 或 grid 子项若设了
min-width: auto（img、input默认值），光靠box-sizing救不了——必须配min-width: 0
box-sizing: border-box 解决不了时，该查什么
如果加了 box-sizing: border-box 还溢出，说明问题不在盒模型本身：
- 检查
body是否清了默认margin：body { margin: 0; } - 检查图片、
iframe、pre是否漏了max-width: 100%，原始尺寸超宽会直接突破父容器 - 检查是否有
white-space: nowrap+ 长文本，强制不换行导致视觉溢出 - 检查 flex 容器中是否用了
flex-shrink: 0+ 固定宽度，空间不足时硬挤出滚动条 - 临时在
body上加outline: 1px solid red，hover 子元素看哪个轮廓凸出视口边缘——那个就是真凶
真正难处理的从来不是 box-sizing 本身，而是它和 min-width、margin、display 类型、甚至父容器是否创建 BFC 的组合效应。改完不验证，等于没改。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
