初學css，相信大家都會用**px**作為單位使用，其實css還有很多單位，可以分為兩類：**絕對單位**和**相對單位**。絕對單位一般用於傳統平面印刷，很少用於前端開發，這裡我們只討論相對單位。- px：畫素
- %：百分比
- em：1em等於「當前元素」的字型大小
- rem：1rem等於「根元素」的字型大小
除以上這些單位，還有vm，ex，vh等，這些一般用於移動端開發，這裡暫且不討論。
1.px
全稱是pixel（畫素），指的是一張或者計算機螢幕中的最小的點，很多地方把px作為絕對單位來講，嚴格來講，px也屬於相對單位，因為螢幕解析度不同，1px的大小也不同。
2.%
在css中，使用%作為單位的屬性大致可以分為三類：
1. width,height,font-size的百分比值相對于父元素」相同屬性」的值來計算的。
2. line-height的百分比值是根據父元素的「font-size」值計算的。
（line-height有點特殊，如line-height：150%是根據父元素的font-size值計算的，而line-height：1.5是根據當前元素的font-size值計算的）
3. vertical-align的百分比是根據當前元素的line-height值來計算的。
3.em
em的大小是相對於「當前元素」的字型大小而言的，其中1em等於當前元素的font-size值，如果當前元素沒有定義font-size，則繼承其父元素的font-size，若父元素也沒有定義，就使用瀏覽器預設的font-size值，這裡同時指出，所有瀏覽器的預設font-size都是16px。
關於em的三個應用：
(1)方便首行縮排兩個字元
可以使用text-indent:2em，這樣無論當前字型多少px，都可以用這個屬性值實現首行縮排兩個字元。
(2)使用em作為統一單位
首先如前面所說，所有瀏覽器的預設font-size值都是16px。
如果我們不想用px作為整個頁面的單位，而是使用em的話，就可以拿預設字型大小開刀，因為62.5%×16px=10px，所以首先申明body或者body，使得預設字型大小變為10px，以後任何元素就都不需要設定多少px，只要將需要的px值除以10，就能得到以em為單位的值。比如12px=1.2em
lang="en">
charset="utf-8">
em單位title>
type="text/css">
body
#p1#p2
#p3#p4
#p5#p6
style>
head>
id="p1">當前字型大小為1emp>
id="p2">當前字型大小為1.5emp>
id="p3">當前字型大小為2emp>
id="p4">當前字型大小為10pxp>
id="p5">當前字型大小為15pxp>
id="p6">當前字型大小為20pxp>
body>
html>
ps：要時刻注意em是相對於」當前元素「的font-size，比如當乙個元素中重寫了font-size的值，而不是依舊繼承body的值，若當這個元素需要定義長或寬等一些值時，是根據當前元素的font-size值，而不是body的font-size值。在實際開發中，我們一般都需要計算兩次。
(3)使用em作為字型大小單位
對於乙個頁面的字型，使用px的可擴充套件性不好，使用%也不符合習慣，最佳選擇就是使用em作為字型單位，當需要改變頁面整體字型大小時，只要改變根元素的大小即可，em在跨平台**開發中有著明顯的優勢。
4.rem
rem，指的是相對於根元素(即html元素)的字型大小,是css3新引進的單位，除ie8及以前的版本外都支援，是移動端常用單位。
psps:國外大部分主流**都是用em作為單位，w3c也建議我們使用em作為單位，因為有些法律規定**要有適應性，國內大多數**都是用px作為單位，至於用哪個好，只能說各有千秋吧。
關於css的幾個單位
px 畫素點 30 百分比，相對於父級的寬高百分比。移動端困局 高度無法與寬度一致，可以使用js設定。em 相對於當前模組的字型大小，web預設為16px，可以進行更改。相當於1em 16px，0.5em 8px，可以精確到小數點後三位。可以用來設定寬高 rem 相對於html的字型大小。1rem ...
關於css取值單位的問題總結
px 絕對單位，頁面按精確畫素展示 em 相對單位，基準點為父節點字型的大小，如果自身定義了font size按自身來計算 瀏覽器預設字型是16px 整個頁面內1em不是乙個固定的值。rem 相對單位，可理解為 root em 相對根節點html的字型大小來計算，css3新加屬性，chrome fi...
CSS 單位 絕對單位 相對單位
我們對單位很熟悉，比如說，千克，千公尺，公尺等，這些就是絕對單位，我們又有聽到太陽的質量等於33個地球，這個就是相對單位。在css中，單位也可以分為這兩類。在第二個box裡,300px的小框跟上面的框的300px一樣長，而第二個框裡面的50 跟第乙個框的50 為不一樣，這個就很好的解釋了相對單位和絕...