body 默认 margin: 8px 导致 100vw 实际超宽 16px 触发水平滚动条；需检查 html/body 的 margin/padding、避免 100vw 与 padding/margin 混用，优先用 calc() 或 gap 修复，善用 DevTools Layout/Rendering/Layers 面板定位溢出源。
检查 body 和根元素是否意外溢出
浏览器默认给 body 加了 margin: 8px，哪怕你写了 width: 100vw，实际内容宽度也会是 100vw + 16px（左右各 8px），直接触发水平滚动条。这不是 bug，是规范行为。
- 最简验证：在 DevTools 里临时加
body { margin: 0; }，滚动条消失 → 就是它 - 别只查自己写的容器，先看
html和body的 computed margin、padding、border -
box-sizing: border-box对body无效 —— 它只作用于块级盒模型，而body的 margin 是外边距，不参与尺寸计算
识别 100vw 与 padding/margin 混用导致的隐性超宽
当你写 width: 100vw 的同时又加了 padding-left: 20px 或 margin-right: 1rem，总宽度就变成 100vw + padding + margin，超出视口。
- 典型场景：全屏 banner 用
100vw宽度，但父容器有padding: 0 20px，子元素没设box-sizing: border-box - 用 DevTools 的「Layout」面板看「Actual width」，对比「Computed width」—— 如果前者明显更大，说明有 padding/margin 被算进去了
- 修复优先级：能用
calc(100vw - 40px)就别靠overflow-x: hidden掩盖；后者会截断 focus-outline、影响可访问性
警惕 flex/grid 容器中子项的 margin 折叠失效
在 display: flex 或 display: grid 容器里，子项的 margin-right 不会像普通流式布局那样“被父容器截断”，而是实打实向外撑开，尤其当子项用 flex: 0 0 auto 时更危险。
- 错误写法：
<div class="container"><div style="margin-right: 20px">A</div><div>B</div></div>，容器设了width: 100vw→ A 的右 margin 会把整体宽度推到100vw + 20px - 安全做法：用
gap替代子项 margin（gap不参与尺寸计算）；或把 margin 移到容器内部，比如用padding配合justify-content: space-between - 注意 Safari 旧版本对
gap支持不全，若需兼容，用margin时务必配合overflow-x: clip（比hidden更语义化）
用 Chrome DevTools 快速定位溢出源
别靠肉眼猜哪个元素多占了 1px —— DevTools 的「Rendering」面板和「Layers」视图才是真工具。
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools → ⚙️ Settings → Rendering → 勾选「Highlight area affected by scrollbars」：溢出区域会高亮为红色边框
- 右键任意元素 → 「Scroll into view」后观察滚动条是否还存在；再右键 → 「Hide element」逐个排除
- 在「Layers」面板里找宽度异常大的 layer（特别是标着「Scrollable」的），点开看它的
bounds和contentSize，差值就是溢出量
margin 引起的滚动条，往往不是某个大错，而是几个 8px、1rem、20px 在不同层级悄悄叠加的结果。越早用工具量化，越不容易陷入“删了一行 CSS 又冒出来”的循环。
