根本原因是 box-sizing: content-box 导致 width: 100% 不含 padding/border，叠加 body 默认 margin、100vw 计算偏差、替换元素未限制等共同引发横向溢出。
检查 box-sizing 是否为 border-box
width: 100% 本身没错，错在浏览器默认用 box-sizing: content-box 计算尺寸：此时 width: 100% 只管内容区，padding 和 border 会额外加在外面。比如父容器内容宽是 375px，子元素设了 width: 100% + padding: 16px，实际总宽就是 375px + 32px = 407px，直接撑出滚动条。
快速验证方法：
- 打开 DevTools，选中溢出元素，在「Computed」面板查
box-sizing值 —— 若是content-box，且该元素有padding或border，基本就是它 - 看「Layout」里「Total size」宽度是否大于父容器或视口
- 临时加
box-sizing: border-box到该元素，刷新看滚动条是否消失
全局重置要写全：* { box-sizing: border-box; } + *::before, *::after { box-sizing: border-box; }，漏掉伪元素照样会悄悄撑宽。
确认 body 是否有默认 margin
浏览器给 body 设了默认 margin: 8px（多数引擎），这 16px 总宽会直接让整个页面“先胖一圈”，哪怕其他样式都对，也会触发横向滚动条。
立即学习“前端免费学习笔记（深入）”；
解决方式很简单：
- 在 CSS 开头加
body { margin: 0; } - 别依赖
* { margin: 0; }—— 它可能被后续样式覆盖，且影响button、input等表单控件的默认间距 - 调试时可临时加
outline: 1px solid red到body，一眼看出是否凸出视口边缘
排查 100vw 与滚动条宽度冲突
移动端 Safari 和 Chrome 中，100vw 包含垂直滚动条宽度（约 12–17px），而 100% 不包含。当页面内容刚好撑满、又因某些元素（如未设 max-width: 100% 的图片）导致 body 实际宽度 > 视口时，100vw 就会多出那几像素，触发横向滚动甚至 iOS 弹性抖动。
常见误用位置：
- Tailwind 的
w-screen类直接套在根容器上 - 轮播容器写成
.slideDiv { width: 100vw; } - 弹窗遮罩层设
width: 100vw; left: 0;，但没处理right或用transform偏移
验证命令：document.documentElement.scrollWidth > document.documentElement.clientWidth，返回 true 就说明存在隐性横向溢出。
注意 img、iframe、table 等替换元素
这些元素默认不响应父容器宽度约束。哪怕父容器 width: 100% + box-sizing: border-box，它们仍按原始尺寸渲染，直接突破边界。
必须显式加限制：
-
img：统一加max-width: 100%; height: auto; -
iframe：除了width: 100%，还要确保其父容器有明确宽度（不能是fit-content或未设width的 flex 项） -
table：不能只靠width: 100%，得用display: block+min-width: max-content+ 外层overflow-x: auto容器包裹
最麻烦的是那些你没写的代码——UI 库内部用 JS 动态插入的 100vw 元素、或第三方组件偷偷加的 padding，它们往往绕过你的 CSS 重置，得一层层关掉样式来定位真凶。
