在css中使用 100vh 和 100% 有什么区别吗？对性能有影响吗？

在CSS中，`100vh`和`100%`都用于设置元素的高度，但有一些区别。

- `100vh`表示视口的高度，即浏览器窗口的高度。它会将元素的高度设置为视口高度的百分比。例如，如果视口高度为800px，则`100vh`等于800px。这意味着无论视口高度是多少，元素的高度都会等于视口高度。

- `100%`表示父元素的高度百分比。它会将元素的高度设置为父元素高度的百分比。如果父元素没有显式地设置高度，则默认情况下它的高度是根据内容来计算的。因此，如果父元素没有固定的高度，那么使用`100%`可能不会产生期望的效果。

性能方面，使用`100vh`和`100%`并没有直接影响。它们只是用于设置元素的高度，不会对页面的性能产生显著影响。然而，过多地使用百分比单位可能会导致页面重绘和回流，从而影响性能。因此，在选择使用`100vh`还是`100%`时，需要根据具体情况来决定。如果你知道父元素有一个确定的高度，并且你希望元素相对于父元素的高度进行调整，那么使用`100%`是合适的。如果你希望元素的高度与视口的高度保持一致，那么使用`100vh`是更好的选择。