单位
数值
在 CSS 中，数值是有上下文的 。比如对于 line-height ，如果没有明确单位，则默认为比率。
line-height建议不明确单位，使用比率。这是因为在一些情况中，font-size会被继承，而line-height大小应当与font-size相关，字体才不会看起来奇怪。
还有这些场景：
filter: sepia(0.5)墨汁色滤镜 50%opacity: 0.5透明度设为 50%rgb(50, 50, 50)数值范围为 0-255transform: scale(1.2)缩放 120%
百分数
当使用百分数单位时，应当了解百分数是如何计算的。比如：
width以父节点的宽度计算百分值。使用
margin和padding也是依照父节点的宽度。
在这个例子中，div p 宽度会先计算 50% ，然后再缩为 10% ：
div {
width: 300px;
height: 100px;
}
div p {
width: 50%; /* 计算结果为: 150px */
transform: translateX(10%); /* 15px */
}
长度单位
绝对长度 单位有：
cm（厘米）、mm（毫米）1in（英尺）=2.54cm=96px1pc（派卡）=1/6in1pt（点）=1/72in1px（像素）=1/96in
相对长度 单位有：
em：字体高度（默认为16px）ex：字母x的高度，或者相当于0.5emcap：大写字母高度ch：数字0的宽度（窄宽字体）ic：汉字水的宽度（全宽字体）rem：根元素的字体高度（默认16px）lh：元素的行高rlh：根元素的行高
使用相对长度单位调整文本大小可以响应用户偏好（即系统文字大小或父元素字体大小）。
视窗（ viewport ）相对单位：
vw、vh：1% 的视窗宽高度vmin、vmax：vw、vh中的最小最大值vi：行方向的 1% 视窗大小vb：块方向的 1% 视窗大小
其他单位
角度单位：
deg、rad、grad、turn（ =360deg）分辨率单位：
dpi（可以用在min-resolution上）
参考
Sizing Units，Learn CSS - web.dev