** em ** 是CSS2引入的相對單位，作為字體大小使用時(shí)和百分比單位類似，都是相對于最近的父元素設(shè)置字體大小，為標(biāo)簽元素設(shè)置字體大小為100%和設(shè)置字體大小為1em是一樣的效果，默認(rèn)情況下瀏覽器的字體大小為16px，這樣只要瀏覽器默認(rèn)的字體大小不變，1em = 16px。
看下面的兩個(gè)例子：
使用%單位表示字體大小
<body style="font-size:100%">
<div style="font-size:80%" class="first">
<p class="first"></p>
<div class="second">
<p class="second"></p>
</div>
<div style="font-size:200%" class="third">
<p class="third"></p>
</div>
</div>
</body>
p.first，p.second元素的字體大小都是：80% x 100% x 16px = 12.8px。
p.third元素的字體大小是：200% x 80% x 100% x 16px = 25.6px。
為什么p.second元素和p.first元素的字體大小相同？
p.second元素的字體大小繼承其直接父元素div.second，而div.second元素的字體大小又直接繼承其直接父元素div.first，如果不設(shè)置div.second元素的字體大小，p.second元素的字體大小就和其直接父元素的兄弟節(jié)點(diǎn)p.first元素的字體大小一致，都繼承自div.first，而div.first元素的字體大小又是相對于body元素的。如果設(shè)置body的font-size=18px，那么p.first，p.second的字體大?。?0% x 18px = 14.4px；p.third的字體大?。?00% x 80% x 18px = 28.8px。
使用em單位表示字體大小
<body style="font-size:1em;">
<div style="font-size:2em" class="first">
<p class="first"></p>
<div class="second">
<p class="second"></p>
</div>
<div style="font-size:2em" class="third">
<p class="third"></p>
</div>
<div>
</body>
p.first，p.second元素的字體大小都是：2em x 1em x 16px = 32px。
p.third元素的字體大小是：2em x 2em x 1em x 16px = 64px。
如果設(shè)置body的font-size=18px，那么p.first，p.second的字體大?。?em x 18px = 36px；p.third的字體大?。?em x 2em x 18px = 72px。
使用em的好處就是子元素的字體大小可以跟隨父元素字體大小的改變而改變，當(dāng)然沒有十全十美的事情，這種好處在有些情況下也可能變成弊端，參見下面對rem的介紹。
既然em和%單位在字體大小上是類似的，那字體大小為啥用em單位的多，用%單位的少？書寫方便？
em原本是活版印刷術(shù)中度量水平寬度的單位，最開始是取自字母M的寬度，但是這種方式不通用，因?yàn)椴皇敲糠N字體中都有字符M，但是每種字體都可以有高度，所以后來em就以字體高度計(jì)算。在CSS中，em是一種通用的單位長度測量單位。印刷中，em是用來度量水平單位的；CSS中，em既可以度量水平單位，又可以度量垂直單位。更多關(guān)于em的只是參見官方介紹。
rem root em，CSS3新增的相對單位，相比于其他CSS3單位（ch，vw，vh，vmax，vmin）移動(dòng)端兼容性強(qiáng)，android2.1+，iso4.1+。作用和em類似，唯一的區(qū)別就是em是相對父元素的，rem是相對html根節(jié)點(diǎn)的，即所有使用rem單位的子元素的字體大小都是相對根節(jié)點(diǎn)的。
<body style="font-size:1rem;">
<div style="font-size:2rem" class="first">
<p class="first"></p>
<div style="font-size:3rem" class="second">
<p class="second"></p>
</div>
<div style="font-size:3rem" class="third">
<p class="third"></p>
</div>
<div>
</body>
p.first元素的字體大小是：2rem x 1rem x 16px = 32px。
p.second，p.third元素的字體大小都是：3rem x 1rem x 16px = 48px。
為什么p.second和p.third元素的字體大小相同？
p.second元素的字體大小繼承自直接父元素div.second，div.second元素的字體大小用了rem單位表示，所以其字體大小直接相對于根元素html的字體大小，而p.third元素的字體大小繼承自直接父元素div.third，div.third元素的字體大小也用了rem單位表示，所以它的字體大小也是相對于根元素html的字體大小的。如果設(shè)置html的font-size=18px，那么p.first元素的字體大小是： 2rem x 18px = 36px；p.second，p.third元素的字體大小是：3rem x 18px = 54px。
使用rem的好處：可以避免使用em帶來的子元素字體大小逐層復(fù)合的連鎖反應(yīng)。
