CSS字体单位px,em,rem的用法

在做网页开发时，经常会用CSS来为页面做样式美化。当定义页面的字体大小时，可用的单位有px,em,rem，这些单位怎么用？来一起看下。

操作方法

01
先看下html代码，代码简单，二个div里有二段文字，body的样式定义了字体的大小为16px，px单位即为像素大小。
02
看下页面，由于div1, div2都没有定义字符的大小，所以继承了body定义的字体大小，为16px。
03
添加了代码，为div1, 2都添加了样式，d1，d2，字体大小都设置为1.5em。
04
运行页面，看下结果。从图中可以看到，字体变大了
05
但上面写的1.5em究竟是多大像素？其实这里的em是相对于body定义的16px的，1.5em就是1.5倍的16px，即24px。
我们修改下代码就可以验证出来了,把d2的字体大小从1.5em改成24px，如图。
06
运行页面，可以看到二段文字的大小都是一样的，1.5em在这里就是为24px.
07
再次修改代码，在d1的div里加一个div，样式为d3，定义的字体大小也为1.5em.
08
运行页面，同样为1.5em，d3的字体却比d1的显示大，为什么？
是由于d3的1.5em是相对d1来说的，因为它是在d1里面。d1是24px，d3就为24px * 1.5 = 36px了。
09
无论是在哪个内容里，我们都希望同样的em大小，显示的字体大小都一样，要怎么改？
这就要用到rem这个单位了。rem是相对于根节点的，即相对于body节点。
修改代码，把d3的 1.5em改为 1.5rem，如图
10
运行页面，可以看到三段文字的大小都一样了。
End