em

首先要知道em是相對于誰的值。
以前我一直以為em是使用em這個元素的父元素的font-size值。這句話是對也不對。
為什么這么說呢？
當使用em的這個元素沒有設置顯式的設置font-size值的時候（這里的顯式是指使用px等單位設置，像font-size=1.25em這種不算，下文會介紹這種情況。），font-size=1.25em的em值是該元素的父元素的font-size值。比如其父元素的font-size=16px，那么該元素的font-size=1.25*16px=20px。但是如果這個元素還設置了padding值，而且還好死不死的用了em。padding=2em，那么情況會怎么樣呢？好了不賣關子了就直接說了，這里的padding值會等于40px，哎？這種情況的話em不是等于20px了嗎？哎？這個20px好像在哪里見過哎。沒錯就是上面設置的該元素的font-size值。這個時候就有點亂了。那什么時候em是指的父元素的font-size值，什么時候又是指的是元素本身的font-size呢。在元素本身沒有顯式設置font-size值的時候，也就是說其font-size的值是由繼承得來的時候，em值為其父元素的font-size值（此時該元素的font-size繼承值就是父元素的font-size）。而且在任何時候，該元素內其他屬性使用em的時候，em的值都是該元素本身的font-size值（計算值）。

rem

rem是指根元素HTML的font-size值，在沒有設置根元素HTML的font-size時，html的font-size會繼承瀏覽器的默認字體大小。
比如瀏覽器的默認字體為16px，那么此時的html繼承了這一字體大小，那么在HTML文檔的任何地方rem都是16px，如果html設置了font-size=1.25em，此時html的font-size=1.25×16px（繼承瀏覽器）=20px，那么rem就等于20px。同時如果瀏覽器字體大小被改成20px，那么html的font-size為1.25*20px=25px，rem也就是25px了。當然如果顯示的設置了HTML的font-size=10px，那么rem也就是10px了。