CSS中的em

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

但是，em的默認行為可能會導致字體大小出現問題，特別是當樣式的層次結構很深時。

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

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

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

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

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

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

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

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