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了。