一、長度單位

1.1 絕對單位 absolute units

1.1.1 px pixel

像素是一個絕對單位，這里，有些可能要說，不是說px是相對單位嗎？其實這點并不準確。因為不管如何設置，像素單位在設備確定之后總是不變的。
在Retina大行其道的今天，物理像素和邏輯像素產生了相對沖突，導致1px所需要的物理像素更多。但是顯示的1px像素大小并沒有實際變化。由此引出像素比率dpr (device pixel ratio)，瀏覽器可以通過window.devicePixelRatio可以獲取到當前瀏覽器的設備像素比率

做屏幕適配時，總是會遇到這些內容

1.1.2 其他單位

in 英寸 ，cm 厘米，mm 毫米，pt磅 pc 點
這些單位不是常用單位，也很少出現(xiàn)在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布局而出現(xiàn)。其代表的是grid布局的剩余空間。 如果設置為1fr，表示需要1份空間。至于這個1份有多大，其實和flex布局時，子元素設置flex是類似的。當flex布局時，還剩余空間，就會按照設置好的比例增長。這里的1fr也是。如果剩余空間，就會按照fr給定的指數(shù)增長 ，如果剩余不足，也只會按照指定的部分縮減，整體上還是保持不變的。

2.6 ch

又是一個非常神奇的單位，這個單位代表可容納0字符的寬度的“先進的尺寸”。也是我第一次看到以數(shù)字作為長度單位。

2.7 ex

我們可能直到em，但是未必知道ex，在css1的時候就已經被采納了。ex是一個相對單位的相對單位，代表二分之一個em的長度單位。這個單位通常用在字體的上標或者下標。很容易的設定字體大小為當前字體的一半。

三、 無單位值

3.1 固定倍數(shù) 0

0有時候可以作為任意數(shù)值單位的值，比如width:0，padding:0 但是你不可以寫 width:1,padding:1 之所以是因為這里的0實際上是一個倍數(shù)的乘法因子，任何數(shù) × 0 = 0，所以可以計算得到準確數(shù)值，而其他數(shù)則不可以，任何數(shù) × n(非0) = n 倍任何數(shù)，但是又不能準確的描述任何數(shù)，因此在渲染解析時，不確定的因素都會被舍棄。

3.2 相關聯(lián)倍數(shù)

比如line-height 屬性，這個屬性關聯(lián)font-size，當設定為無單位數(shù)值時，表示這個屬性值時font-size值的倍數(shù)關系。 假設當前元素的font-size:15px 則 line-height:1 解析后得到 line-height:15px

3.3 計數(shù)

animation-iteration-count: 5 表示計數(shù)器執(zhí)行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 );

五、百分比 %

百分比也是一個倍數(shù)關系，從父級相同屬性上換算的值
假設當前父級的 width: 100px ，子級的 width:15%， 換算得到子級 width:15px

六、顏色

6.1 關鍵詞

在色彩中又很多關鍵詞數(shù)值，是由系統(tǒng)預設的，最終會被換算成十六進制的數(shù)值，比如
red = #ff0000 green = #00ff00 blue =#0000ff

6.2 十六進制

從 #000000到 #ffffff ，每一個十六進制表示一種色彩

6.2 RGB 紅綠藍色彩通道

使用 rgb()函數(shù)可以創(chuàng)建 rgb(0,0,0)到rgb(255,255,255)的色彩

6.3 HSL 色彩，飽和度，明亮度

使用hsl()函數(shù)可以創(chuàng)建基于 hsl(0,0,0)到 hsl(360,100,100)的色彩，在低版本IE中可能不受支持

6.4 alpha 透明度

alpha是一個從0-1的浮點數(shù)，0表示不透明，1表示全透明
現(xiàn)代瀏覽器中，支持透明度無疑是一個非常有用的內容，使用rgba()或者hsla()創(chuàng)建基于alpha通道的色彩，支持 rgba(0,0,0,0)到

 所有的涉及到顏色屬性的顏色值都會有一個變量名 'currentColor'，這個名稱代表繼承元素的'color'的屬性值。