一、絕對長度單位
絕對長度單位視借質而定，不依賴於環境（顯示器、分辨率、操作系統等）。絕對長度單位相互之間是固定的，並固定在一些物理測量中。主要運用在輸出環境已知的情況下。
絕對單位包括物理單位(pysical units：in, cm, mm, pt, pc, Q)和視角單位(visual angle unit：px)。
| 單位 | 描述 |
|---|---|
| cm | 厘米，1cm = 96px/2.54 |
| mm | 毫米，1mm = 1/10th of 1cm |
| in | 英寸 (1in = 96px = 2.54cm) |
| px * | 像素 (1px = 1/96th of 1in) |
| pt | point，大約1/72英寸； (1pt = 1/72in) |
| pc | pica，大約6pt，1/6英寸； (1pc = 12 pt) |
示例如下所示：
h1 { margin: 0.5in } /* inches */ h2 { line-height: 3cm } /* centimeters */ h3 { word-spacing: 4mm } /* millimeters */ h3 { letter-spacing: 1Q } /* quarter-millimeters */ h4 { font-size: 12pt } /* points */ h4 { font-size: 1pc } /* picas */ p { font-size: 12px } /* px */
所有的絕對長度單位都是兼容，px是它們的標准單位。
對於css設備，這些維度可以互相錨定：
- 通過將物理單位與其物理測量值相關聯，或
- 通過將像素單位與參考像素相關聯
對於典型視距下的印刷媒體，錨點單位應該是標准物理單位(inches、centimeters等)之一。對於屏幕媒體(含高分辨率設備)、低分辨率設備、觀看距離異常設備，推薦使用錨點單位作為像素單位。對於這樣的設備，建議像素單位是指最接近參考像素的設備像素的總數。
1、px(像素)
px 是 pixels(像素) 的縮寫，是一種絕對單位，用於屏幕顯示器上，傳統上一個像素對應於計算機屏幕上的一個點，而對於高清屏則對應更多。
任何現代顯示屏，不管是手機，平板，筆記本還是電視都是由成千上萬的像素組成的，所以我們可以使用這些像素來定義長度。
CSS 將光柵圖像(如照片等)的顯示方式定義為默認每一個圖像大小為“1px”。 一個“600x400”解析度的照片的長寬分別為“600px”以及“400px”，所以照片本身的像素並不會與顯示裝置像素(可能非常小)一致，而是與 px 單位一致。如此就可以將圖像完整的與網頁的其它元素排列起來。
注意：
- chrome 瀏覽器最小的字體為 12px，如果設置 10px 也會渲染成 12px 。
- 如果錨單位是像素單位，那么物理單位可能與它們的物理測量值不匹配。否則，如果錨單位是物理單位，則像素單位可能不會映射到所有設備像素。
2、新舊css對於像素單位和物理單位定義區別
在以前的CSS版本中，像素單位與物理單位之間並沒有固定的比例關系：物理單元總是與它們的物理測量值聯系在一起，而像素則會隨着參考像素的變化而變化。
現在版本中，很多內容均過多地依賴於96dpi的假設，打破這一假設會破壞內容。
參考像素是設備上一個像素的視角，像素密度為96dpi，與閱讀器的距離為一臂之長。一臂標稱長度為28英寸，其視角約為0.0213度。在臂長范圍內，1px相當於0.26毫米(1/96英寸)。
下圖說明了觀看距離對參考像素大小的影響：71厘米(28英寸)的閱讀距離產生0.26毫米的參考像素，而3.5米(12英尺)的閱讀距離產生1.3毫米的參考像素。
由上圖可知，如果觀看距離增加，顯示像素必須變得更大。
下圖顯示了影響設備的分辨率的像素單元：1px的面積1px是由一個單一的點在一個低分辨率的設備(例如，一個典型的計算機顯示器)，在同一地區覆蓋了16點高分辨率設備(如打印機)。
由上圖可知，顯示在高分辨率設備上覆蓋1px*1px的區域需要的設備像素(點)比在低分辨率設備上覆蓋同樣的區域需要更多的設備像素(點)。
3、pt(點)
點(Points)，絕對長度單位。
4、pc(派卡)
派卡(Picas)，絕對長度單位。相當於我國新四號鉛字的尺寸。
5、cm(厘米)、mm(毫米)、in(英寸)、Q(1/4毫米)
厘米(Centimeters)，絕對長度單位。
毫米(Millimeters)，絕對長度單位。
英寸(Inches)，絕對長度單位。
四分之一毫米(quarter-millimeters)，絕對長度單位。
注意：值不區分大小寫，序列化為小寫，例如1Q序列化為1Q。
二、相對長度單位
相對長度單位指定一個長度相對於另一個長度的屬性。使用相對單位的樣式表可以更容易地從一個輸出環境擴展到另一個輸出環境。
因此當面對不同的設備時，相對長度更適用。
| 單位 | 描述 |
|---|---|
| em | 它是描述相對於應用在當前元素的字體尺寸，所以它也是相對長度單位。一般瀏覽器字體大小默認為16px，則2em == 32px； |
| ex | 依賴於英文字母小 x 的高度 |
| ch | 數字 0 的寬度 |
| rem | 根元素（html）的 font-size |
| vw | viewpoint width，視窗寬度，1vw=視窗寬度的1% |
| vh | viewpoint height，視窗高度，1vh=視窗高度的1% |
| vmin | vw和vh中較小的那個。 |
| vmax | vw和vh中較大的那個。 |
| % |
子元素不繼承指定的父元素的相對值；它們繼承計算的值。
1、字體相對長度
字體相對長度指的是它們的元素字體度量，或者，在rem的情況下，指的是根元素的度量。
（1）em
em是相對單位，為每個子元素通過「倍數」乘以父元素的px值，如果我們每一層div都使用1.2em，最內層就會是16px x 1.2 x 1.2 x 1.2 x 1.2 x 1.2 = 39.8px。(瀏覽器預設字體大小為16px，若無特別指定則會直接繼承父元素字體大小)
<div style="font-size:1.2em;">1.2em
<div style="font-size:1.2em;">1.2em
<div style="font-size:1.2em;">1.2em
<div style="font-size:1.2em;">1.2em
<div style="font-size:1.2em;">1.2em</div>
</div>
</div>
</div>
</div>
顯示如下所示：
（2）rem
rem是相對單位，為每個元素通過「倍數」乘以根元素的px值，如果我們每一層div都使用1.2rem，最內層就會是16px x 1.2 = 19.2px。(根元素指的是html的font-size，預設為16px )。
<div style="font-size:1.2rem;">1.2rem
<div style="font-size:1.2rem;">1.2rem
<div style="font-size:1.2rem;">1.2rem
<div style="font-size:1.2rem;">1.2rem
<div style="font-size:1.2rem;">1.2rem</div>
</div>
</div>
</div>
</div>
顯示如下所示：
（3）%
%百分比是相對單位，和em大同小異，簡單來說em就是百分比除以一百。如果每一層div都使用120%，就等同於1.2em，最內層就會是16px x 1.2 x 1.2 x 1.2 x 1.2 x 1.2 = 39.8px。
<div style="font-size:120%;">120%
<div style="font-size:120%;">120%
<div style="font-size:120%;">120%
<div style="font-size:120%;">120%
<div style="font-size:120%;">120%</div>
</div>
</div>
</div>
</div>
顯示如下所示：
（4）ex
ex 是指所用字體中小寫 x 的高度，通常為字體高度的一半。示例如下所示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div { display: inline-block; font-size: 18px; } .x { width: 50px; height: 1ex; background: red; } </style> </head> <body> <h4>定義一條與 x 一樣高的線</h4> <div>yyypppxxx</div> <div class="x"></div> </body> </html>
顯示如下所示：
（5）ch
ch是一個相對於數字0的大小。1ch就是數字0的寬度。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div { width: 3ch; background: powderblue; } </style> </head> <body> <div>0000</div> </body> </html>
顯示效果：
注意：只是與0的寬度相關，與0的高度無關。由於ch使用規則稍微復雜，一般都會用em來代替ch使用。
2、窗口百分比長度
vw,vh,vmin,和vmax都是基於瀏覽器視窗(Viewport)的大小的。因為它們的實際大小是根據視窗(Viewport)大小改變的，對於響應式設計中這使它們成為很好的單位。
（1）vw
vw 相對於視口的寬度。視口被均分為100單位的vw(即瀏覽器可視區) 100vw = 可視區寬度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> p { font-size: 3vw; } </style> </head> <body> <h3>vw:視窗寬度的百分比（1vw 代表視窗的寬度為 1%）</h3> <p>相對於視口的寬度。視口被均分為100單位的vw</p> </body> </html>
顯示效果如下：
拉小視窗寬度時，p標簽內容隨之變小。
（2）vh
vh 相對於視口的高度。視口被均分為100單位的vh(即瀏覽器可視區) 100vh = 可視區高度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> p { font-size: 3vh; } </style> </head> <body> <h3>vh:視窗高度的百分比（1vh 代表視窗的高度為 1%）</h3> <p>相對於視口的高度。視口被均分為100單位的vh</p> </body> </html>
顯示效果如下：
拉大視窗高度，p標准內容隨之變大
（3）vmin/vmax
vmin/vmax 相對於視口的寬度或高度中較小的那個。其中最小的那個被均分為100單位的vmin（即vm）
三、calc單位運算
calc()函數用於動態計算長度值，單位運算時可以使用各種單位進行加減乘除運算。