给你举一个简单的例子
body { font-size:14px}
div { font-size:12px height:2em}
<body>
<div></div>
</body>
此时，height:2em 是相对于font-size:12px（div的字体大小）的2em
body { font-size:14px}
div { font-size:12px height:2rem}
<body>
<div></div>
</body>
此时，height:2rem 是相对于font-size:14px（body的字体大小） 的2em
也就是说rem以body来做参照，不受自己父级的影响，而em是拿自己的父级做参照，和body无关。
如果整个页面用rem做单位，那么只需要考虑到body的字体大小即可
前端css中em和px都是表示长度的单位，除了这两者，CSS 还有几个不同的单位用于表示长度。而em和px的区别就在于：1.em指的是相对长度，相对单位长度指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。相对长度还有：ex、ch、rem、vw、%等等。2.px是绝对长度单位，它是一个固定的值，它反应一个真实的物理尺寸。绝对长度单位视输出介质而定，不依赖于环境（显示器、分辨率、操作系统等）。绝对长度还有：cm、mm、in、pt等等。CSS padding 属性CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。
例如，如果您希望所有 h1 元素的各边都有 10 像素的内边距，只需要这样：
h1 {padding: 10px}
em是长度单位
相对长度度量可以有三种形式：em单位，ex单位和percentage（百分比）。em和ex单位相对于
字体的大小来定义长度。em单位相对于实际字体的磅值来定义长度：这样，如果现在的字体大小为 12pt，那么1.5em=18pt。相反，ex单位则是相对于字体的x高度来定义长度：即相对于当前字体中字母“x”的高度。这样，一个单位的ex大小既取决于字体的大小，也取决于字体族类型，因为在给定的磅值下，实际的x高度将随字体族不同而不同。
目前来看，em单位比ex单位更为可靠：为了在不同浏览器之间获得最好的兼容性，最好还是使用em单位。但要注意的是，em单位和ex单位都会导致打印问题。
