em是相对于当前的字体大小,rem是相对于页面html 元素的font-size 大小
如下demo: 两个div 的高度都是 36 (html font-size 是18 2rem 就是36,与当前行字体设置无关)
<!DOCTYPE html>
<html style="font-size: 18px;"><head>
<title>-webkit-box</title>
</head>
<body >
<div style=" font-size: 20px;">
<div style=" background-color: #f00; height:2rem;">
测试一下EM
</div>
</div>
<div style=" font-size: 10px;">
<div style="background-color: #0f0;height: 2rem;">
测试一下EM
</div>
</div>
</body>
</html>