1. 长度（length）单位
长度单位主要分为两种，相对和绝对。
相对长度单位 基于其它元素的长度。例如 em 基于该元素的字号大小，vh 则与设备视口的高度有关。
绝对长度单位 则是一个固定的物理长度。
1.1 ch 单位
相对单位，该单位代表 0 的宽度。即 1ch 就是 1 个 0 的宽度（非高度）。
也就是说 2ch 宽度的容器，只能装下两个 0。
<div class="ch-units">00000000</div>
.ch-units {
width: 5ch;
height: 5ch;
font-size: 12px;
background-color: yellow;
}
因为 ch 是相对宽度，并且是根据 0 的宽度变化而变化，所以改变 0 的字体大小，ch 的宽度也会发生变化。
如下图右侧是 12px 的字体大小，5ch 宽度是 36px
如下图右侧是 14px 的字体大小，5ch 宽度是 42px
ch 还有如下规则：
1ch = 1 个英文 = 1 个数字 2ch = 1 个中文
1.2 ex 单位
相对单位，该单位表示小写字母 "x" 的高度，即 1ex 就是 1 个 "x" 的高度。
通常来说，1ex ≈ 0.5em
<div class="ex-units">xxxxxxxx</div>
.ex-units {
width: 5ex;
height: 5ex;
font-size: 12px;
background-color: blue;
}
1.3 em 单位
相对单位，em 单位最多可以设置三位小数。
元素的字体大小设置
em是相对于父元素的字体大小，即父元素16px，子元素的字体大小2em = 2 * 16px = 32px元素的
widthheightpaddingmarigin以em为单位，则是相对于该元素的font-size，即如果元素的字体大小是12px，则width = 2em = 2 * 12px = 24px（元素如果未设置字体大小，则继承父元素字体大小）。
<div class="em-units">emmmmmmm</div>
.em-units {
width: 5em;
height: 5em;
font-size: 2em;
background-color: pink;
}
如上所示，div 的字体大小计算结果是 32px，Chrome 浏览器默认字体大小是 16px，所以其父元素默认是 16px，所以该元素的字体大小 2em = 16px * 2 = 32px，然后宽高是以当前元素的字体大小计算的，前面得出当前元素的字体大小计算为 32px，所以宽高 5em 就是 32px * 5 = 160px。
1.4 rem 单位
相对单位，1 rem 与等于根元素(<html>) font-size 的计算值。
即 <html> 节点的字体大小 font-size: 16px，则 1rem = 16px，以此类推。
1.5 vh、vw、vmin、vmax 视口单位（Viewport units）
相对单位。
在桌面端，视口指的是浏览器的可视区域；在移动端，指的视布局视口（Layout Viewport）。
vw: 1vw 等于视口宽度的 1%，也即视口的宽度可以用 100vw 表示vh: 1vh 等于视口高度的 1%，，也即视口的高度可以用 100vh 表示vmin: 选取 vw 和 vh 中最小的那个vmax: 选取 vw 和 vh 中最大的那个
假设浏览器的视口尺寸宽度为 1080px，那么 1vw = 1080px * 1% = 108px。
1.6 px 单位
绝对单位。一像素（pixel）。对于普通的屏幕，通常是一个设备像素（点）。
对于打印机和高分辨率屏幕，一个 CSS 像素往往占多个设备像素。
一般来说，每英寸的像素的数量保持在 96 左右， 1px = 1in 的 96 分之一。
1.7 cm mm in 单位
绝对单位。
一厘米。 1cm = 96px / 2.54。
一毫米。 1mm = 1/10 * 1cm。
一英寸。 1in = 2.54cm = 96px。
2. 角度（angle）单位
角度单位主要在 <gradient> 和 transform 的某些方法等场景中有所应用。
角度单位可以使用 + 或 - 开头。正数表示顺时针的角，负数表示逆时针的角。对于静态的角，同样的角度可以使用任意等效的值表示。
比如 90deg 等于 -270deg，1turn 等于 4turn。
2.1 deg 单位
度。一个完整的圆是 360deg。例：0deg，90deg，14.23deg。
2.2 grad 单位
百分度。一个完整的圆是 400grad。例：0grad，100grad，38.8grad。
2.3 rad 单位
弧度。一个完整的圆是 2π 弧度，约等于 6.2832rad。1rad 是 180/π 度。例：0rad，1.0708rad，6.2832rad。
2.4 turn 单位
圈数。一个完整的圆是 1turn。例：0turn，0.25turn，1.2turn。
换算如下：
零角：0 = 0deg = 0grad = 0turn = 0rad
直角：90deg = 100grad = 0.25turn ≈ 1.5708rad
直角（逆时针）：-90deg = -100grad = -0.25turn ≈ -1.5708rad
平角：180deg = 200grad = 0.5turn ≈ 3.1416rad
3. 时间（time）单位
主要在 animation、transition 及相关属性中使用。
3.1 s 单位
以秒为单位的时间。 例： 0s, 1.5s, -60s。
3.2 ms 单位
以毫秒为单位的时间。例： 0ms, 150.25ms, -60000ms。
1s = 1000ms。
4. 分辨率（resolution）单位
用于描述媒体查询中的分辨率的 CSS 数据类型表示输出设备的像素密度。 在屏幕上，单位与 CSS 英寸，厘米或像素有关，而与物理值无关。
4.1 dpi 单位
表示每英寸的点数。屏幕通常每英寸包含 72 或 96 个点，但打印文档的 dpi 通常要大得多。 1 英寸是 2.54 厘米，1dpi ≈ 0.39dpcm。
4.2 dpcm 单位
每厘米上的点数。1 英寸是 2.54 厘米, 1dpcm ≈ 2.54dpi.
