一、了解 CSS 單位

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

指定 CSS 單位對于非零值是必須的，因為沒有默認單位。丟失或忽略單位將被視為錯誤。但是，如果該值為 0，則可以省略該單位（畢竟，零像素與零英寸是一樣的）。

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

二、相對長度單位

相對長度單位指定相對于另一個長度屬性的長度。相對單位是 描述 ：em當前的字體大小 。

ex ：當前字體的 x 高度 。

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

1． 使用 em 單位

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

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

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

運行效果

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

因此，當我們用 em 指定字體大小時，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＞平安保險＜／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＞項目＜／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＞

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

這是默認 font－size的四舍五入，方便 px 到 em的轉換。

2． 使用 ex 單位

ex 單位等于當前字體的 x 高度。

所謂的 x 高度是因為它通常等于小寫 x 的高度，如下所示。但是， ex 即使對于不包含 x 的字體，也會定義的。

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