css %和vh

在CSS中，百分比（%）和视口高度（vh）是两个常用的单位。前者通常用于表示相对长度，后者则用于根据可视区域的大小设置元素的大小。

百分比用于任何属性中，但最常用于宽度、高度和间距。例如，如果一个元素的宽度设置为50%，则它将占用其父元素的一半宽度。如果一个元素的上边距设置为25%，则它将以父元素高度的四分之一为顶部边距。以下是一些示例：

/* 将宽度设置为页面宽度一半 */
#Box {
  width: 50%;
}

/* 将元素的顶部边距设置为父元素高度的四分之一 */
#Box {
  margin-top: 25%;
}

视口高度（vh）是相对于视口高度的单位。视口高度指的是用户当前浏览器窗口的高度。因此，1vh等于1/100视口高度。这种单位通常用于设置元素的高度。以下是一些示例：

/* 将元素的高度设置为浏览器窗口高度的40% */
#Box {
  height: 40vh;
}

需要注意的是，视口高度（vh）和百分比（%）有时会产生相同的效果。设想一个元素位于一个没有内边距或边框的父容器中，并且其高度设置为100%。那么它会与其父元素的高度相同。但是，如果该元素在这个父元素的内部有一个内边距或边框，那么它实际上比父元素更高。在这种情况下，我们可以使用视口高度单位，以确保元素高度与视口高度相对应。