目錄
1. 絕對長度單位
彼此固定，不會因爲其他元素的尺寸變化而變化。
px cm mm Q in pc pt
| 單位 | 名稱 | 等價於 |
|---|---|---|
| px | 像素(pixels) | 典型的度量單位，很多其他長度單位直接映射成像素 |
| cm | 釐米(centimeters) | 1cm = 10mm = 96px/2.54 = 37.8px |
| mm | 毫米(millimeters) | 1mm = 0.1cm = 3.78px |
| Q | 1/4毫米(quarter-millimeters) | 1q = 1/4mm = 0.945px |
| in | 英寸(inches) | 1in = 2.54cm = 96px |
| pc | 派卡(picas) | 1pc = 12pt = 1/6in = 1/6*96px = 16px |
| pt | 點(points) | 1pt = 1/72in = =0.0139in = 1/722.54cm = 1/7296px = 1.33px |
px (pixel) 像素
px表示“絕對尺寸”（並非真正的絕對），實際上就是CSS中定義的像素（此像素與設備的物理像素有一定的區別）
利用px設置字體大小及元素寬高等比較穩定和精確
在IE下，不能適應瀏覽器縮放時產生的變化(影響不大，忽略)
2. 相對長度單位
指定相對於另一長度的長度。主要有：
2.1 字體相關的相對長度單位：
em rem ex ch
em
- em是相對字體長度單位。
- 如果用於font-size屬性本身，則是相對於父元素的font-size。
- 若用於其他屬性（width,height），則是相對於本身元素的font-size。
- 國外使用比較多；
注意：
任意瀏覽器的默認字體大小都是16px;
因此1em=16px=>10px = 0.625em
爲了換算方便，可在body選擇器中聲明：font-size=62.5%這樣，就使得10px = 1em;
缺點：
em是繼承父元素的字體大小，每當父元素的字體大小改變時，就得重新計算。
rem
- rem是CSS3新增的一個相對字體長度單位，只相對根元素即HTML元素字體大小
html{font-size:62.5%; }
body{font-size:12px;font-size:1.2rem ;}
p{font-size:14px;font-size:1.4rem;}
- IE9/10中font縮寫和僞元素中不支持rem單位
- IE9/10部分支持，IE11+、Firefox、Chrome、Safari、Opera 的主流版本都支持，爲了兼容不支持 rem 的瀏覽器，我們需要在 rem 前面寫上對應的 px 值，這樣不支持的瀏覽器可以優雅降級。
ex
- ex 指所用字體中小寫x的高度。但不同字體x的高度可能不同。實際上，很多瀏覽器取em值的一半作爲ex值
- ex 在實際中常用於微調
ch
- ch與ex類似，被定義爲數字0的寬度。當無法確定數字0寬度時，取em值得一半作爲ch值
- ch 在實際中主要用於盲文排版
- 兼容性：IE8不支持
2.2 視口相關的相對長度單位：
vw: 視口高度，默認爲視口高度的1%
vh : 視口寬度，默認爲視口寬度的1%
vmin : 佈局視口高度和寬度之中值較小的那個的 1/100
vmax : 佈局視口高度和寬度之中值較大的那個的 1/100
- 視口單位中的“視口”，在桌面端，毫無疑問指的就是瀏覽器的可視區域；
- 但是在移動端，它指的則是Layout Viewport（佈局視口）
2.3 相對於包含塊的寬高或字體大小
%
百分比是一個相對長度單位，相對於包含塊（containing block）的高寬或字體大小。
關於包含塊（containing block）的概念，不能簡單地理解成是父元素。
如果是靜態定位和相對定位，包含塊一般就是其父元素。
如果是絕對定位的元素，包含塊應該是離它最近的 position爲非static屬性的祖先元素。
如果是固定定位的元素，它的包含塊是視口（viewport）。
