100vw 包含垂直滚动条宽度是因其定义为 window.innerwidth（含滚动条占位），导致内容撑破视口右边界并触发横向滚动条，需重置 body/html margin/padding、慎用父容器约束、优先用 100% 或现代 100dvw。
100vw 包含垂直滚动条宽度
根本原因不是写错了，而是 100vw 的定义本身：它等于 window.innerWidth，即整个浏览器窗口宽度——**含垂直滚动条占位**（Windows 通常约 15–17px，macOS 可能为 0 或隐藏但仍有逻辑宽度）。当页面内容高度超出视口、触发垂直滚动条后，100vw 就比实际可视区域宽出这一段，导致元素撑破视口右边界。
常见错误现象：header、全宽轮播容器或 body 直接设 width: 100vw，一滚动就出现横向滚动条；DevTools 中该元素的「Total size」宽度明显大于视口宽度。
- 临时验证：在元素上加
outline: 1px solid red，对比是否凸出视口边缘 - 别依赖“看起来没超”——哪怕只多 1px，
overflow-x: visible（默认）就会强制显示滚动条 - 注意：某些浏览器（如 Safari）对
vw的计算更严格，即使滚动条视觉隐藏，仍计入
父容器未清除默认 margin 或 padding
body 和 html 有浏览器默认 margin: 8px，若你用 100vw 布局但没重置，实际总宽 = 100vw + 16px，必然溢出。
使用场景：全屏布局、固定定位遮罩层等需要“绝对铺满”的场合，但前提是布局上下文干净。
- 必须加：
html, body { margin: 0; padding: 0; } - 如果用了
box-sizing: border-box全局重置，也要确认它生效于html和body——伪元素和某些第三方组件可能绕过 - 检查是否在
<style scoped></style>中写样式：它不作用于html/body，得用全局<style></style>
100vw 与父容器约束冲突
当你把 width: 100vw 写在某个有 max-width、overflow: hidden 或 flex 约束的父容器里，vw 依然按视口算，完全无视父级限制。结果就是：视觉上被裁剪，但 DOM 宽度仍是 100vw，可能触发父容器的 overflow-x 或影响子项排布。
典型陷阱：在 max-width: 1200px 的 wrapper 里放 width: 100vw 的 banner，banner 实际宽度可能是 1920px（视口宽），直接突破容器。
- 优先用
width: 100%：它尊重父容器 content box 宽度，天然适配约束 - 非要用
100vw？确保该元素是position: fixed或脱离普通流，且父容器不设宽度相关限制 - 现代替代方案：
width: 100dvw（dynamic viewport width），会自动排除滚动条宽度，但仅支持 Chrome 125+、Safari 17.4+、Firefox 127+
img/video/pre 等内联元素未限制宽度
即使你把容器设成 width: 100% 或 100vw，里面的 <img>、<video></video>、<pre class="brush:php;toolbar:false;"></pre> 若原始尺寸超宽，会直接撑开容器——尤其在响应式断点切换时容易漏掉。
这不是 100vw 的错，但常和它一起暴露问题：你刚修复了容器宽度，结果发现图片又把横向滚动条拽回来了。
- 统一加：
img, video, iframe, pre { max-width: 100%; height: auto; } - 避免对
pre或代码块设white-space: nowrap后忘记加overflow-x: auto - SVG 如果是 inline 且没设
width/height，也可能继承父容器的100vw并溢出
100vw 本身，而在于它把所有隐性宽度叠加（滚动条、默认 margin、未约束媒体元素）一次性放大暴露出来。修一个地方，往往要连带查三处。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
