CSS常见问题

前言

汇总记录开发过程中常见的CSS问题（欢迎提问）及可能的解决办法

100vw比100%宽

当页面出现垂直滚动条同时出现不该出现的横向滚动条

原因：

100vw 和 100% 在浏览器中看似相同，但其实它们计算的参考对象不同

• 100%
  100% 的宽度是 相对于父元素的内容宽度 (content box) 而定的。如果父级是 body 或 html，那就以 浏览器可视区域（减去滚动条后） 的宽度为准。所以 100% 的宽度 不会包含滚动条。

• 100vw
  100vw 表示 视口宽度（viewport width），它是 整个浏览器窗口的宽度，包括垂直滚动条。

也就是说：
当页面有垂直滚动条时，100vw 实际上比可用内容区域宽约 15px（滚动条的宽度），vh同理。

如何修复或避免

方法 1：使用 width: 100%

如果你只是想让元素和可视内容宽度一致（不超出滚动条），用：

width: 100%;

方法 2：修正 100vw 的偏差

如果你一定要用 100vw（例如在某些布局逻辑中），可以通过以下方法避免滚动条影响：

方式 A：

width: calc(100vw - var(--scrollbar-width, 15px));

但滚动条宽度在不同系统中不固定（Windows 15px、macOS 可能是 0），所以不推荐硬编码。

方式 B：

在没有滚动条的布局中（例如使用 overflow: hidden;）使用 100vw，这样 vw 就不会被滚动条影响。

方法 3：使用 100dvw（现代浏览器推荐）

在较新的浏览器中，CSS 支持 动态视口单位：

width: 100dvw;

dvw（dynamic viewport width）会自动排除滚动条的影响。
Chrome、Edge、Firefox、Safari 新版本都支持。

垂直margin合并

当上下两个div都是设置了

margin:20px 0;

但他们的市级间距却只有20px

原因：

两个或多个元素的垂直margin相遇时，它们不会按照预期叠加，而是会发生重叠

如何修复或避免

使用 padding、border 或 overflow: hidden; 破坏合并