CSS的字體單位很多，常見的有像px、em、rem、pt、百分比等等。今天我們要聊的就是CSS的單位em，它是相對于父元素的字體大小進(jìn)行計算的，也就是說在某個元素內(nèi)部，他的字體大小是以其父元素的字體大小為基礎(chǔ)的。

p{
font-size: 1.2em;
}

假如有一個父元素的字體大小為16px，那么當(dāng)它的字體大小為1em時，它的字體大小就為16px。而當(dāng)一個子元素的font-size值為0.5em，那么它的字體大小就是父元素的字體大小的一半。

.parent {
font-size: 16px;
}
.child {
font-size: 0.5em; /*字體大小為8px*/
}

同時，em單位也可以用在其他CSS屬性上，比如：margin，padding，width等等。如果一個元素的寬度為20em，那么它的寬度就是父元素字體大小乘以20。當(dāng)然，這里需要注意的是，em單位是不穩(wěn)定的，由于它是相對于父元素的字體大小而言的，所以當(dāng)父元素字體大小發(fā)生變化時，子元素也會跟著改變。

.parent{
font-size: 16px;
width: 20em; /*總寬度為320px*/
}
.parent2{
font-size: 12px;
width: 20em; /*總寬度為240px*/
}

在實際開發(fā)中，因為em單位的特性，我們可以將em與rem等其他單位結(jié)合使用，例如在最外層的html元素上，將一個固定的基準(zhǔn)值(比如說16px)定義為1rem，之后在其它元素中使用em作為字體單位，這樣可以保證整個頁面的字號大小一致，而不會受到瀏覽器縮放等影響。

html {
font-size: 16px; /* 基準(zhǔn)值定義為1rem */
}
body {
font-size: 1em; /* 相當(dāng)于16px */
}
.some-component {
font-size: 1.5em; /* 相當(dāng)于24px */
margin-top: 1.5rem; /* 相當(dāng)于24px */
}

綜上所述，CSS中的em單位在網(wǎng)頁排版時起到了重要的作用，它可以根據(jù)父元素的字體大小進(jìn)行計算，實現(xiàn)字號大小的漸進(jìn)式增減，幫助提高頁面的可讀性和可訪問性。