为什么当宽度为 100vw 时 x 轴上有一个滚动条?

Why there is a scroll on x-axis when width is 100vw?

我已经编写了该代码,它在 x 轴上显示了一个滚动条。

 nav{width:100vw;}

但是当我将值从 vw 切换到 % 时,它才开始正常工作。

那为什么会有vw的卷轴?

因为将宽度设置为 100vw 将为元素提供 100vw 宽度 + 任何导致溢出的填充或边距

100vw element = 100vw width + padding + margin

100% 并非如此;

100% element = 100% width inclusve of margin + padding

主要是body保证金。所以将 body -> margin 设置为 0 并看到它以 100% 的速度工作。

% 是相对于父元素的。所以100%会取父元素的100%面积。

但是vw是直接相对于viewport的。视口是网页的可见区域。 100vw 占用整个视口宽度。

You can check this article for example.