<1> 相对单位
主要分为两大类：
字体相对单位，他们都是根据（相对于）font-size来进行计算的。常见的字体相对单位有：em、rem、ex、ch；视窗相对单位，他们都是根据（相对于）视窗大小来决定的。常见的视窗相对单位有vw、vh、vmax、vmin。
(1) em && rem
em是相对于字体大小的。如果自身元素是没有设置字体大小的，那么就会根据其父元素的字体大小作为参照去计算；如果元素本身已经设置了字体，那么就会基于自身的字体大小进行计算。
rem是根据页面的根元素（< html >）的字体大小来计算的。如果没有专门给 < html > 设置字体大小的话，就是浏览器默认的字体大小！！
So：
- 当需要根据浏览器的font-size设置缩放时，应该使用 rem；
- 需要根据组件的font-size来定，使用 em
(2) ex && ch
ex 和 ch 都是排版用的单位，它们的大小取决于元素的font-size 和 font-family属性。
ex指的是所用字体中小写字母 x 的高度。因此，如果两个字体不一样，那么 ex 的值是不一样的。因为每种字体的小写 x 的高度是不一样的。
ch是基于数字 0 的宽度计算的。会随着字体的变化而变化。而0 的宽度通常是对字体的平均字符宽度，它是一个估计值。由于 ch 是一个近似等宽的单元，所以在设置容器的宽度时很有用，比如一个容器想要显示指定个数的字符串时，就可以使用这个单位。
(3) 视窗相对单位 vw、vh、vmax、vmin
vw：视窗宽度的百分比；vh：视窗高度的百分比；vmax：较大的 vh 和 vw；vmin：较小的 vh 和 vw。
即假如一个浏览器的高度是800px，那么1vh的值就是8px。假如一个浏览器高度为500px，宽度为1200px，那么1vmin就是5px，1vmax就是12px。
<2> 绝对单位
- px
- pt
- pc
- cm
- mm
- in
换算单位如下：
1in = 25.4mm = 2.54cm = 6pc = 72pt =96px
<3> 百分比单位
(1) 盒模型中的百分比
- width : 相对于父盒子的宽度来计算
- height ：相对于父盒子的高度来计算
- padding 、margin ：如果是水平方向上的，就是相对于父盒子的宽度来计算；如果是垂直方向上的，就是相对于父盒子的高度来计算！！！
(2) 文本中的百分比
- font-size：根据父元素的font-size 进行计算；
- line-height：根据font-size进行计算；
- vertical-align：根据line-height进行计算；
- text-indent：如果是水平的，则根据width进行计算，如果是垂直的，则根据 height 进行计算。
(3) 定位 position 中的百分比
- relative ：自恋型，相对于自己
- absolute ：相对于最近的，position 属性不为 static 的祖先元素，如果没有，那就相对于浏览器
- fixed ：相对于浏览器
- sticky ：相对于浏览器
(4) 转换 transform 中的百分比
- translateX() 根据自己的 width 计算
- translateY() 根据自己的 height 计算
上述都是比较经常用到的一些单位
