当宽度为100vw时，为什么在x轴上有滚动

Question

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

nav{width:100vw;}

但当我将值从vw切换到%时，它就开始正常工作了。

那么为什么会有大众的卷轴呢？

Answer 1

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

100vw element = 100vw width + padding + margin

这不是100%的情况；

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

主要原因是body裕度。因此，将body -> margin设置为0，并将其视为100%工作

Answer 2

%是相对于父元素的。因此，100%将占用父元素的100%面积。

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

例如，你可以查看这篇文章。