vw和vh分别代表视口宽度和视口高度。
使用width: 100vw而不是width: 100%的区别在于，虽然100%将使元素适合所有可用空间，但视口宽度有一个特定的度量，在本例中是可用屏幕的宽度，包括文档边距。
如果设置样式body { margin: 0 }，100vw的行为应该与100%相同（对于body的子元素）。

附加注解

使用vw作为网站中所有内容的单位，包括字体大小和高度，将使网站始终与设备的屏幕宽度成比例显示，而无论其分辨率如何。这使得确保网站在工作站和移动的上显示完全相同变得超级容易。
您可以在body CSS中设置font-size: 1vw（或任何适合您项目的大小），以rem为单位指定的所有内容都将根据设备屏幕自动缩放，因此很容易将现有项目甚至框架（例如Bootstrap，它已经使用rem作为所有内容的单位）移植到这个概念中。

Havenard的回答看起来并不完全正确，我发现vw填充了 windows 的宽度，但没有考虑到滚动条，所以，如果你的内容比 windows 高（所以你的网站有一个垂直滚动条），那么使用vw会导致一个小的水平滚动条，我不得不把width: 100vw换成width: 100%来摆脱水平滚动条。

您可以通过添加max-width来解决此问题：

#element {
   width: 100vw;
   height: 100vw;
   max-width: 100%;
}

当您使用CSS来使 Package 器成为全宽度时，使用代码width: 100vw;，您会注意到页面中的水平滚动，这是因为html和body标签中的padding和margin添加到 Package 器大小中，因此解决方案是添加max-width: 100%

@Havenard的回答为这个问题提供了完美的解释。除此之外，这还提供了差异的视觉表现。
当你有一个带有滚动条和一个应该适合整个屏幕宽度的元素的站点时，你会注意到100vw和100%之间的关键区别。

选项1

下面是一个相同的例子。
我在下面的代码中所做的一切就是当你将鼠标悬停在<h1>标签上时，将它的宽度从100vw更改为100%。

body {
  /* margin: 0; */
}

.scroll {
  height: calc(110vh);
}

h1 {
  width: 100vw;
  /* width: 100%;*/
  text-align: right;
  outline: 5px solid black
}

h1:hover {
  width: 100%;
}

h1:before {
float: left;
  content: "100vw "
}

h1:hover:before {
  content: "100% "
}

<div class="scroll">
  <p>Hover over the below block</p>
  <h1>Width</h1>
</div>

如果您运行上面的代码片段并将文本悬停，您会注意到两件事：
1.水平滚动条消失
1.整个文本将对您可见

• 注意：运行以上代码片段后，您可以在浏览器devtools中试用以上代码，看看它如何影响元素 *

选项2（* 镀 chrome 和镶边 *）

一个二个一个一个
另一种直观地查看自己项目中差异的方法是将display:flex样式设置为100 vw的元素。
当你在浏览器devtools中高亮显示这些元素时，你可以注意到元素右端有一个向左的箭头，你也可以看到高亮显示元素的阴影横跨滚动条，这表明它考虑了整个屏幕宽度（包括滚动条宽度）

解决类似问题的其他问题包括：

1. 100vw causing horizontal overflow, but only if more than one?
2. CSS Units - What is the difference between vh/vw and %?
3. Prevent 100vw from creating horizontal scroll