CSS中的高度测量单位(中常用的计量单位有哪)

在CSS中，高度测量通常用于定义一个元素在垂直方向上所占用的空间。高度测量单位有很多种，常用的包括px（像素）、em（相对于父元素的字体大小）、rem（相对于根元素的字体大小）、vh（视口高度的百分比）和%（相对于父元素的百分比）等。

像素是最常见的高度测量单位之一，它是指一个屏幕上的最小可分辨物理点的大小。在CSS中，通常使用px作为固定的高度测量单位，因为在不同的设备和浏览器中，像素的大小都是固定不变的，这样就可以保证元素的高度在不同的设备上都显示一致。

下面是一个用像素作为高度单位的例子：

    <div style="height: 100px;"></div>

em是指字体大小的单位，它是相对于父元素的字体大小而言的。如果你在某个元素的样式中设置font-size: 16px，那么这个元素内的1em就等于16px。如果有一个字体大小为12px的父元素，且字体大小一直被保持为12px不变，那么这个元素内的1em就等于12px。

rem是根元素字体大小的单位，它是相对于根元素的字体大小而言的。在大多数浏览器中，根元素的字体大小是16px，所以1rem等于16px，因此可以用rem来实现响应式的字体大小。

下面是一个em和rem作为高度单位的例子：

    <div style="font-size: 16px; height: 2em;"></div>
    <div style="font-size: 16px; height: 2rem;"></div>

vh是指视口高度的百分比，它是相对于当前视口的高度而言的。比如，一个元素的高度设置为50vh，就是表示这个元素的高度等于当前视口高度的50%。

百分比%是相对于父元素的高度而言的。比如，如果一个元素的高度设置为50%，就表示这个元素的高度等于父元素高度的50%。

下面是一个vh和百分比作为高度单位的例子：

    <div style="height: 50vh;"></div>
    <div style="height: 50%;"></div>

不同的高度测量单位在不同的场景中都有用处，需要根据具体情况来选择。对于布局的相关样式，通常会使用像素或百分比，而对于字体大小等可变的样式，可以选择em或rem。vh可以用于设置与视口有关的元素高度。