<p>100vw包含滚动条宽度而100%不包含，导致100vw在有纵向滚动时超出可视区域引发横向滚动；应优先使用100%，必要时用calc(100vw - scrollbar宽度)动态补偿。</p>
100vw 包含滚动条宽度，而 100% 不包含
浏览器把 100vw 算作整个窗口的像素宽，包括垂直滚动条占位（Windows 常为 17px，macOS 隐藏时仍参与计算）。但用户实际能看见的内容区宽度是 document.documentElement.clientWidth，它已自动扣除滚动条。所以当页面有纵向滚动时：100vw > clientWidth → 元素右边缘超出可视区域 → 触发横向滚动条。
而 width: 100% 是相对于父元素内容区计算的。只要父级是 html 或 body，且没额外 padding/margin，它就天然对齐 clientWidth，不引入额外偏移。
哪些地方最容易踩坑
常见误用场景包括：
- 轮播容器写成
.slideDiv { width: 100vw; }—— 移动端出现 Y 滚动条后必出黑边 - Tailwind 中直接用
class="w-screen"（等价于width: 100vw）套在根容器上 - 弹窗遮罩层设
width: 100vw; left: 0;，但没处理right或transform偏移 - 伪元素或 JS 动态插入的元素被赋予
100vw宽度，却没同步控制高度/溢出
为什么 box-sizing: border-box 也救不了 100vw
box-sizing 只影响元素自身盒模型的尺寸计算方式，它不改变 vw 的基准定义。哪怕你写了 box-sizing: border-box，100vw 还是按含滚动条的视口总宽算——多出来的那几像素照旧存在。
立即学习“前端免费学习笔记（深入）”；
真正要查的是：body 默认有 margin: 8px；img 没设 max-width: 100%；flex 子项用了 flex-shrink: 0 + 固定宽；或者某些 UI 库内部 JS 动态注入了 100vw 样式，CSS 覆盖不了。
修复建议：优先用 100%，必要时用 calc() 补偿
绝大多数场景下，把 width: 100vw 改成 width: 100% 就能解决问题。这不是妥协，而是语义更准确的选择。
如果必须依赖视口单位（比如做全屏背景、fixed 遮罩），可用动态补偿：
- 临时方案：
width: calc(100% + 0px)—— 能绕过 Safari 对100vw的小数像素四舍五入异常 - 稳妥方案：
width: calc(100vw - var(--scrollbar-width, 0px))，配合 JS 注入变量：document.documentElement.style.setProperty('--scrollbar-width', (window.innerWidth - document.body.clientWidth) + 'px') - 别只给
body加overflow-x: hidden，必须加在html上才真正起作用（移动端根滚动容器是html）
最麻烦的不是写错，而是某些组件内部用 JS 动态写 right 偏移或 100vw 宽度，你改了 CSS 也可能被覆盖。得去 DevTools 的 Styles 面板看 computed 值，再顺藤摸瓜找 JS 注入点。
