CSS中的em

em是一個非常有用的CSS單位，通常用于指定字體大小。例如，font-size: 1.2em;表示選定文本的字體大小為其父元素的1.2倍。

但是，em的默認(rèn)行為可能會導(dǎo)致字體大小出現(xiàn)問題，特別是當(dāng)樣式的層次結(jié)構(gòu)很深時。

舉個例子，假設(shè)我們的HTML代碼如下：

<div class="parent">
<div class="child">
<p class="grandchild">Hello World!</p>
</div>
</div>

默認(rèn)情況下，em的大小基于元素的父元素的字體大小。如果我們像下面這樣為p.grandchild選擇一個字體大小：

.grandchild{
font-size: 0.8em; /* 以其父元素的80%作為大小 */
}

那么p.grandchild的字體大小將是其直接父元素的font-size屬性的80％乘以其祖先元素中所有em值的產(chǎn)品。這可能會導(dǎo)致難以預(yù)測的樣式效果。

因此，最好的方法是取消em的默認(rèn)行為，代之以根據(jù)我們期望的方式設(shè)置字體大小。我們可以將html元素（在CSS中）的字體大小設(shè)置為我們所期望的基本字體大小，并使用rem單位來指定字體大小。例如：

html {
font-size: 16px; /* 基本字體大小，16px為1em */
}
.grandchild{
font-size: 0.8rem; /* 使用基本字體大小，即16px的80% */
}

這樣可以確保font-size屬性的值是根據(jù)我們期望的方式設(shè)置的，并且不受難以預(yù)測的em值的影響。