css單位我們常用的是px,也即是像素。隨着網頁開發自適應的要求，css3新增了許多單位，rem、vw和vh、vmin和vmax、ch和ex等。
em
做前端的應該對em不陌生，不是什么罕見的單位，是相對單位，參考物是父元素的font-size，具有繼承的特點。如果字體大小是16px（瀏覽器的默認值），那么 1em = 16px。
不過，這樣使用很復雜，很難很好的與px進行對應，因此，前端開發的前輩們總結了一個經驗：
body { font-size: 62.5%; }
那么，這樣之后 1em = 10px 在布局等使用的時候好換算了很多。
百分比
百分比相信大家更不會陌生了，百分比一般寬泛的講是相對於父元素，但是並不是十分准確。
- 1、對於普通定位元素就是我們理解的父元素
- 2、對於position: absolute;的元素是相對於已定位的父元素（offset parent）
- 3、對於position: fixed;的元素是相對於 ViewPort。（viewport：可視窗口，也就是瀏覽器的window那么大。）
rem
rem支持IE9及以上，意思是相對於根元素html（網頁），不會像em那樣，依賴於父元素的字體大小，而造成混亂。使用起來安全了很多。
html {font-size: 62.5%; /**10 ÷ 16 × 100% = 62.5% 1rem = 10px **/} body {font-size: 1.4rem; /**1.4 × 10px = 14px **/} h1 { font-size: 2.4rem; /**2.4 × 10px = 24px**/}
這樣整個網頁都會比較統一！不會造成混亂！
rem單位確實好處蠻多的，它是相對於根節點，讓我們整個網站單位可以統一。還可以讓我們的字體更好的自適應網站的大小。但是，你用過了就知道，它會出現一個問題：
用Chrome瀏覽器打開你做的網站的時候，有時候會出現字體很大的情況。但是刷新一下頁面就好了。
之所以會出現這種情況，原因是因為我們為了計算方便，將原本默認1rem=16px修改1rem=10px。因此，我們在html中通常做了如下設置：
html {font-size: 62.5%; /**10 ÷ 16 × 100% = 62.5% 1rem = 10px **/}
但是呢，Chrome瀏覽器有時候會忽略了html的設置。於是在初始化頁面的時候，出現了上面字體過大的情況，本來1.6rem應該渲染成16px的字體，卻被渲染成了16*1.6=25.6px大小了。
你仔細研究會發現，出現字體過大的“元素”，通常是沒有設置font-size的，元素的font-size是繼承根目錄的，因此，字體會變大。
因此，最佳的一種解決方案是：
在你要展現的文字父級或者其本身設置font-size
第二種解決方案：
我們在頁面中添加style樣式，給body設置font-size
例如把下面的代碼放到 head 里面：
<style> body { font-size: 1.2rem; } </style>
vh 和 vw
IE10＋ 和現代瀏覽器都支持這兩個單位。
vw Viewport寬度， 1vw 等於viewport寬度的1%
vh Viewport高度， 1vh 等於viewport高的的1%
vw和vh會隨着viewport變化自動變化，再也不用js控制全屏了。
甚至有些人喪心病狂的字體大小都用vw和vh控制，來達到字體和viewport大小同步的效果。
vmin和vmax
IE10+ 和現代瀏覽器都已經支持vmin
webkit瀏覽器之前不支持vmax，新版已經支持，所有現代瀏覽器已經支持，但是IE 全部 不支持vmax
vmin vw和vh中比較 小 的值
vmax vw和vh中比較 大的值
這兩個屬性也會隨着viewport變化
ch和ex
IE9+ 和現代瀏覽器都已經支持,這兩個單位時根據 當前font-family 的相對單位。
ch 字符0的寬度
ex 小寫字符x的高度
如圖：
當font-family改變的時候這兩個單位的值也會變化，不同字體表現的樣式不一樣。
css3的calc()
瀏覽器支持IE9+、FF4.0+、Chrome19+、Safari6+
calc()語法非常簡單，就像我們小時候學加 （+）、減（-）、乘（*）、除（/）一樣，使用數學表達式來表示：
.container{ width: calc(expression); }
例如：
.container{ width: calc(100% - 20px); //注：減號前后要有空格，否則很可能不生效！！ }
兼容寫法：
.container{ width: 90%;/*寫給不支持calc()的瀏覽器*/ width:-moz-calc(100% - (10px + 5px) * 2); width:-webkit-calc(100% - (10px + 5px) * 2); width: calc(100% - (10px + 5px) * 2); }
line-height百分比
line-height百分比在面試中可能經常問到。例如你知道line-height:120%和line-height:1.2的區別嗎？
現在就說一下行高帶單位和不帶單位的區別，例如下面的例子：
line-height:26px; 表示行高為26個像素
line-heigth:120%;表示行高為當前字體大小的120%
line-height:2.6em; 表示行高為當前字體大小的2.6倍
帶單位的行高都有繼承性，其子元素繼承的是計算值，如父元素的字體大小為14px，定義行高line-height:2em;則計算值為 28px，不會因其子元素改變字體尺寸而改變行高。(例如：父元素14px，子元素12px,那么行高就是28px，子元素雖然字體是12px，行高還是父元素的行高)
line-height:2.6;表示行高為當前字體大小的2.6倍
不帶單位的行高是直接繼承，而不是計算值，如父元素字體尺寸為14px，行高line-height:2;子元素字體為12px，不需要再定義行高，他默認的行高為24px。（例如：子元素12px，他的行高是24px,不會繼承父元素的28px）
一個完整的例子：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta name="description" content=""/> <meta name="keywords" content=""/> <style> .parent_01{font-size:14px;line-height: 150%; background: green;padding:10px} .parent_02{font-size:14px;line-height: 1.5; background: green;padding:10px} .parent_03{line-height: 150%; background: green;padding:10px} .children{font-size:26px;background: red} </style> </head> <body> <div class="parent_01"> <div class="children">行高測試</div> </div> <br/><br/> <div class="parent_02"> <div class="children">行高測試</div> </div> <br/><br/> <div class="parent_03"> <div class="children">行高測試</div> </div> </body> </html>
其中，parent_01，parent_02，parent_03下面的文字效果如圖所示：
如上圖,結果分析：
- parent_01:有百分比的children繼承了父級元素14*1.5=21px；
- parent_02:沒有百分比，不帶單位的是自己的1.5倍，也就是26*1.5=39px;
- parent_03：帶百分比，但是父元素沒有設置字體大小，但是父元素繼承了瀏覽器默認的字體大小16px，即時16*1.5=24px