CSS长度单位
绝对长度单位
px
px是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有DPI可选。Windows系统默认是96dpi，Apple系统默认是72dpi。
想要了解更多关于px的内容，可以参考这篇文章
in、cm、mm、pt
- in: 英寸，1in == 96px
- cm:厘米，1cm == 37.8px
- mm:毫米，1mm == 0.1cm == 3.78px
- pt:point，一般用于打印
1in = 2.54cm = 25.4 mm = 72pt = 96px
in、cm、mm、pt，这些也都是绝对长度，但是基本上没有人会用。
相对长度单位
em
em是相对于他的父节点font-size的长度单位，而且会多级节点意味着多级嵌套。
rem
rem为root em，即相对于根节点font-size的长度单位，如下图所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>css长度单位</title>
<style>
html {
font-size: 16px;
}
.em1, .em2, .em3{
font-size: 1.5em;
border: 1px solid #333;
margin: 3px;
}
.rem1, .rem2, .rem3{
font-size: 1.5rem;
border: 1px solid #333;
margin: 3px;
}
</style>
</head>
<body>
<div class="em1">
em1
<div class="em2">
em2
<div class="em3">
em3
</div>
</div>
</div>
<div class="rem1">
rem1
<div class="rem2">
rem2
<div class="rem3">
rem3
</div>
</div>
</div>
</body>
</html>
视窗长度单位
vw
100vw表示可视区的宽度
vh
100vh表示可视区的高度
vmin
min(100vh, 100vw)：表示可视区宽度和高度的最小值
vmax
max(100vh, 100vw)：表示可视区宽度和高度的最大值
百分比
严格意义上来说，百分比并不是单位，表示相对于父组件相同属性的值的大小。