前军教程网

CSS中的vh和vw单位分别代表视口的高度和宽度，并且它们是相对于视口的百分比单位。vh是视口高度的1%，vw是视口宽度的1%。

CSS百分比(%)则是相对于包含它的父元素的尺寸。

举例来说，如果你设置一个元素的宽度为50vw，那么不管视口的宽度是多少，这个元素的宽度总是视口宽度的一半。如果设置高度为50vh，则元素的高度始终是视口高度的一半。

CSS百分比(%)与vh/vw的区别在于，百分比是相对于父元素的尺寸，而vh/vw是相对于整个视口的尺寸。

例子代码：

/* 设置元素宽度为视口宽度的50% */
.element {
	width: 50vw;
}

/* 设置元素高度为视口高度的50% */
.element {
	height: 50vh;
}

/* 设置元素宽度为父元素宽度的50% */
.parent {
	width: 200px; /* 假设父元素宽度为200px */
}
.child {
	width: 50%; /* 子元素宽度为100px */
}

在实际应用中，你可以根据需要选择使用哪种单位。例如，设计一个全屏的背景图，可以使用vh和vw单位；而设计一个宽度自适应的容器，可以使用百分比(%)。