一、了解 CSS 單位

測量長度的單位可以是絕對的，例如像素，點(diǎn)等，也可以是相對的，例如百分比（％）和 em 單位。

指定 CSS 單位對于非零值是必須的，因?yàn)闆]有默認(rèn)單位。丟失或忽略單位將被視為錯(cuò)誤。但是，如果該值為 0，則可以省略該單位（畢竟，零像素與零英寸是一樣的）。

注意： 長度是指距離測量。長度包括數(shù)字值，后面加單位，比如 10px、2em、50％ 等。數(shù)字和單位之間不能出現(xiàn)空白。

二、相對長度單位

相對長度單位指定相對于另一個(gè)長度屬性的長度。相對單位是 描述 ：em當(dāng)前的字體大小 。

ex ：當(dāng)前字體的 x 高度 。

em 和 ex 單位取決于套用至元素的字體大小。

1． 使用 em 單位

em 的值等于使用它的元素的 font－size 屬性的計(jì)算值。它可用于垂直或水平測量。

例如，如果 font－size 元素設(shè)置為 16px，并且 line－h(huán)eight 設(shè)置為 2．5em，則 line－h(huán)eight像素計(jì)算值為：2．5?x?16px?＝?40px。

P ｛    font－size： 16px；    line－h(huán)eight： 2．5em；｝

運(yùn)行效果

當(dāng)在 font－size 屬性本身的值中指定 em 時(shí)會發(fā)生異常，在這種情況下，它引用父元素的字體大小。

因此，當(dāng)我們用 em 指定字體大小時(shí)，1em 繼承自 font－size。因此， font－size： 1．2em； 使文本比父元素的文本大 1．2 倍。

＜html＞    ＜head＞        ＜meta charset＝＂utf－8＂＞        ＜meta name＝＂viewport＂ content＝＂width＝640， user－scalable＝no＂＞        ＜title＞平安保險(xiǎn)＜／title＞        ＜link rel＝＂stylesheet＂ type＝＂text／css＂ href＝＂css／fy．css＂ ／＞    ＜／head＞
   ＜body＞        ＜meta http－equiv＝＂Content－Type＂ content＝＂text／html； charset＝utf－8＂ ／＞        ＜title＞項(xiàng)目＜／title＞        ＜style＞            body ｛                font－size： 62．5％；                font－family： Arial， Helvetica， sans－serif；            ｝
           p ｛                font－size： 1．6em；            ｝
           p：firt－letter ｛                font－size： 3em；                font－weight： bold；            ｝＜／style＞
       ＜body style＝＂text－align： center； background－color： aquamarine；＂＞            ＜div＞ddad＜／div＞            ＜p＞ Hellow world＜／p＞        ＜／body＞
＜／html＞

代碼解析：瀏覽器中字體的默認(rèn)大小為 16px。我們的第一步是通過將主體設(shè)置 font－size 為 62．5％ 來減小整個(gè)文檔的大小，這會將字體大小重置為 10px（16px 的 62．5％）。

這是默認(rèn) font－size的四舍五入，方便 px 到 em的轉(zhuǎn)換。

2． 使用 ex 單位

ex 單位等于當(dāng)前字體的 x 高度。

所謂的 x 高度是因?yàn)樗�通常等于小�?x 的高度，如下所示。但是， ex 即使對于不包含 x 的字體，也會定義的。

P ｛    font－size： 16ex；    line－h(huán)eight： 2．5em；｝