一、长度单位
1.1 绝对单位 absolute units
1.1.1 px pixel
像素是一个绝对单位，这里，有些可能要说，不是说px是相对单位吗？其实这点并不准确。因为不管如何设置，像素单位在设备确定之后总是不变的。
在Retina大行其道的今天，物理像素和逻辑像素产生了相对冲突，导致1px所需要的物理像素更多。但是显示的1px像素大小并没有实际变化。由此引出像素比率dpr (device pixel ratio)，浏览器可以通过window.devicePixelRatio可以获取到当前浏览器的设备像素比率
| 公式 | 单位面积 | 设计稿 |
|---|---|---|
| 1px=1dp | 1px*1px=1dp*1dp | 1:1 |
| 1px=2dp | 1px*1px=2dp*2dp | 1:2 |
做屏幕适配时，总是会遇到这些内容
1.1.2 其他单位
in 英寸 ，cm 厘米，mm 毫米，pt磅 pc 点
这些单位不是常用单位，也很少出现在css的布局中
二、 相对单位
2.1 em
em是相对于当前元素的font-size属性的单位值，当font-size设置为 12px时，1em = 12px
但是font-size是一个可继承的属性，所以，当你没有设置值时，会从父级继承该属性的值。这一点相当重要。
2.2 rem
rem相比em的好处就是，所有相对单位rem是以root元素也就是html标签的font-size为基准，因此有了同一的度量单位，就不再担心继承上影响了实际所需要的大小。当html的font-size设置为15时，1rem=15px
2.3 vw vh
这个相对单位时相对于屏幕设备的 vw就是view width简写，vh 就是view height简写。
该单位是将屏幕等分为100分， ，
2.4 vmin vmax
vmin 取当前视窗最小的边，然后等分100份。
vmax 取当前视窗最大的边，然后等分100份。
2.5 fr (fraction)
这个单位伴随着 grid布局而出现。其代表的是grid布局的剩余空间。 如果设置为1fr，表示需要1份空间。至于这个1份有多大，其实和flex布局时，子元素设置flex是类似的。当flex布局时，还剩余空间，就会按照设置好的比例增长。这里的1fr也是。如果剩余空间，就会按照fr给定的指数增长 ，如果剩余不足，也只会按照指定的部分缩减，整体上还是保持不变的。
2.6 ch
又是一个非常神奇的单位，这个单位代表可容纳0字符的宽度的“先进的尺寸”。也是我第一次看到以数字作为长度单位。
2.7 ex
我们可能直到em，但是未必知道ex，在css1的时候就已经被采纳了。ex是一个相对单位的相对单位，代表二分之一个em的长度单位。这个单位通常用在字体的上标或者下标。很容易的设定字体大小为当前字体的一半。
三、 无单位值
3.1 固定倍数 0
0有时候可以作为任意数值单位的值，比如width:0，padding:0 但是你不可以写 width:1,padding:1 之所以是因为这里的0实际上是一个倍数的乘法因子，任何数 × 0 = 0，所以可以计算得到准确数值，而其他数则不可以，任何数 × n(非0) = n 倍任何数，但是又不能准确的描述任何数，因此在渲染解析时，不确定的因素都会被舍弃。
3.2 相关联倍数
比如line-height 属性，这个属性关联font-size，当设定为无单位数值时，表示这个属性值时font-size值的倍数关系。 假设当前元素的font-size:15px 则 line-height:1 解析后得到 line-height:15px
3.3 计数
animation-iteration-count: 5 表示计数器执行5次
四、 角度单位
四个单位的换算关系
4.1 deg度
通常在旋转中使用 transform: rotate( 2deg );
4.2 grad 梯度
通常在旋转中使用 transform: rotate( 2grad );
4.3 rad 弧度
通常在旋转中使用 transform: rotate( 2rad );
4.4 turn 圈
通常在旋转中使用 transform: rotate( 2turn );
五、百分比 %
百分比也是一个倍数关系，从父级相同属性上换算的值
假设当前父级的 width: 100px ，子级的 width:15%， 换算得到子级 width:15px
六、颜色
6.1 关键词
在色彩中又很多关键词数值，是由系统预设的，最终会被换算成十六进制的数值，比如
red = #ff0000 green = #00ff00 blue =#0000ff
6.2 十六进制
从 #000000到 #ffffff ，每一个十六进制表示一种色彩
6.2 RGB 红绿蓝色彩通道
使用 rgb()函数可以创建 rgb(0,0,0)到rgb(255,255,255)的色彩
6.3 HSL 色彩，饱和度，明亮度
使用hsl()函数可以创建基于 hsl(0,0,0)到 hsl(360,100,100)的色彩，在低版本IE中可能不受支持
6.4 alpha 透明度
alpha是一个从0-1的浮点数，0表示不透明，1表示全透明
现代浏览器中，支持透明度无疑是一个非常有用的内容，使用rgba()或者hsla()创建基于alpha通道的色彩，支持 rgba(0,0,0,0)到
所有的涉及到颜色属性的颜色值都会有一个变量名 'currentColor'，这个名称代表继承元素的'color'的属性值。