在CSS中，高度测量通常用于定义一个元素在垂直方向上所占用的空间。高度测量单位有很多种，常用的包括px（像素）、em（相对于父元素的字体大小）、rem（相对于根元素的字体大小）、vh（视口高度的百分比）和%（相对于父元素的百分比）等。
一、像素px
像素是最常见的高度测量单位之一，它是指一个屏幕上的最小可分辨物理点的大小。在CSS中，通常使用px作为固定的高度测量单位，因为在不同的设备和浏览器中，像素的大小都是固定不变的，这样就可以保证元素的高度在不同的设备上都显示一致。
下面是一个用像素作为高度单位的例子：
<div style="height: 100px;"></div>
二、em和rem
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和百分比%
vh是指视口高度的百分比，它是相对于当前视口的高度而言的。比如，一个元素的高度设置为50vh，就是表示这个元素的高度等于当前视口高度的50%。
百分比%是相对于父元素的高度而言的。比如，如果一个元素的高度设置为50%，就表示这个元素的高度等于父元素高度的50%。
下面是一个vh和百分比作为高度单位的例子：
<div style="height: 50vh;"></div>
<div style="height: 50%;"></div>
总结
不同的高度测量单位在不同的场景中都有用处，需要根据具体情况来选择。对于布局的相关样式，通常会使用像素或百分比，而对于字体大小等可变的样式，可以选择em或rem。vh可以用于设置与视口有关的元素高度。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/246810.html
微信扫一扫 
支付宝扫一扫 