字體中的單位
| unit | explain |
|---|---|
| px | 絕對單位，像素px是相對于顯示器屏幕分辨率而言的。 |
| em | em是相對長度單位。參考物是父元素的font-size，具有繼承的特點。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認字體尺寸。 |
| rem | 是CSS3新增的一個相對單位，這個單位引起了廣泛關(guān)注。這個單位與em的區(qū)別在于使用rem為元素設(shè)定字體大小時，仍然是相對大小，但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優(yōu)點于一身，通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。 |
| 百分比 | 百分比單位更像“em”單位,除了一些根本性的差異。首先,當(dāng)前的字體大小等于100%(比如12 pt = 100%)。當(dāng)使用百分比單位,你的文字在移動設(shè)備上仍然保持完全的可伸縮性和可訪問性。 |
注意
- 【em】如果在** font-size **上使用em這個單位，應(yīng)該乘以父元素的字體大小，如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認字體尺寸。(引自CSS2.0手冊)。用在 font-size 之外的屬性上，則應(yīng)該乘以元素自身的字體大小
- 【%】如果某個元素設(shè)置了百分比的屬性，則后代元素繼承的是計算后的值 ，而不是原百分比 。
乘以包含塊的寬度 margin, padding, left, right, text-indent, width, max-width, min-width eg：padding-top:20%; 20%指的是父元素寬度的20%
乘以包含塊的高度 top, bottom, height, max-height, min-height
乘以元素的字體大小 line-height
乘以元素的行高 vertical-align - 【包含塊】
包含塊類型：
- 對于普通定位元素就是我們理解的父元素
- 對于position: absolute;的元素是相對于已定位的父元素（offset parent）
- 對于position: fixed;的元素是相對于 ViewPort
相關(guān)參考：
淺析CSS 屬性之中經(jīng)常出現(xiàn)的百分比
css中的px、em、rem 詳解
綜合指南:何時使用 Em 與 Rem
