你可能沒注意的CSS單位

css中的單位我們經常用到px、pt、em、百分比，px和pt不用多說

em是相對單位，參考物是父元素的font-size，具有繼承的特點

如果字型大小是16px（瀏覽器的預設值），那麼1em = 16px

這樣使用換算很複雜，尤其是和px對應，大家總結出了經驗

body

這樣之後1em = 10px在布局等使用的時候好換算了很多

百分比也是很常見的用法，看似簡單其實有些初學者可能注意不到的知識

首先要明確百分比是相對於誰，寬泛的講是父元素，但是並不是十分準確

對於普通定位元素就是我們理解的父元素

對於position: absolute;的元素是相對於已定位的父元素（offset parent）

對於position: fixed;的元素是相對於 viewport

viewport：可視視窗，也就是瀏覽器的window那麼大

padding、margin 如果設定了百分比，會發現左右和預期一樣，用的父元素寬度的百分比，但是用的也是 ** 寬度 ** 百分比，而不是想象中的高度的百分比

後代元素繼承的是百分比計算後的值，而不是原百分比，這個對於line-height的時候經常會遇到坑，還有這樣的面試題問你line-height設定為120%和1.2的區別

em是個很不錯的單位，但是有個問題就是可能會帶來混亂，因為em依賴於父元素的字型大小，各個元素父元素的字型尺寸不一定一樣，會帶來布局上很大的不確定性

remfont size of the root element

rem相對於根元素html（網頁），這樣使用起來就安全了很多

html

body

h1 ie9+ 和現代瀏覽器都已經支援了

vw和vh會隨著viewport變化自動變化，再也不用js控制全屏神馬的了

甚至有些人喪心病狂的字型大小都用vw和vh控制，來達到字型和viewport大小同步的效果

ie10＋ 和現代瀏覽器都支援這兩個單位

這兩個單位是針對vw和vh

這兩個屬性也會隨著viewport變化

ie10+ 和現代瀏覽器都已經支援vmin

webkit瀏覽器之前不支援vmax，現在已經支援，所有現代瀏覽器已經支援，但是ie ** 全部 ** 不支援vmax

這兩個單位時根據 ** 當前font-family** 的相對單位

當font-family改變的時候這兩個單位的值也會變化，不同字型表現的樣式不一樣

ie9+ 和現代瀏覽器都已經支援

寫的時候介紹了一些，大神寫了測試頁面可以幫我們直觀的看到

7 css units you might not know about

css的長度單位

你可能不知道的7個css單位

你可能沒注意的CSS單位

css中的單位我們經常用到px pt em 百分比，px和pt不用多說 em是相對單位，參考物是父元素的font size，具有繼承的特點 如果字型大小是16px 瀏覽器的預設值 那麼1em 16px 這樣使用換算很複雜，尤其是和px對應，大家總結出了經驗 body 這樣之後1em 10px在布局等...

7個你可能不認識的CSS單位

今兒，我就準備向大夥兒介紹一些你們之前可能很少見過css傢伙們。他們每個都是度量的單位，類似pixel 和 em 這樣的，但是很有可能你之前從來就沒聽過這些傢伙們！就讓我們一起來交個朋友吧 我們首先介紹下和我們熟悉的很相似的貨。em 被定義為相對於當前物件內文字的字型大小。炒個栗子，如果你給body...

7個你可能不認識的CSS單位

眾所周知css技術我們雖然很熟悉，在使用的過程卻很容易被困住，這讓我們在新問題出現的時候變得很不利。隨著web繼續不斷地發展，對於新技術新解決方案的要求也會不斷增長。因此，作為網頁設計師和前端開發人員，我們別無選擇，必須熟悉我們手上的工具，做到知己知彼，這樣才能百戰不殆。這就意味著有那麼些個特別的貨...