em是相对长度单位。
em会继承父级元素的字体大小。如果没有设置，则是相对于浏览器的默认字体尺寸。
浏览器默认字体16px，1em=16px。
为了方便计算，一般在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
<p class="p4">父级10px，自己2em的p</p>
div { font-size: 16px; } .p4 { font-size: 2em; }
尝试把父级字体设置为62.5%
<div class="div">
<p>父级62.5%，p为16em</p>
<p>16px</p>
</div>
.div { font-size: 62.5%; } .div p:first-child { font-size: 1.6em; } .div p:last-child { font-size: 16px; }
两个都是实际16px大小。
三个一起举（三）个例子 分别使用三个单位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> html { font-size: 1px; } .p1 { font-size: 16rem; } .p2 { font-size: 16px; } .p3 { font-size: 16em; } </style> </head> <body> <div> <p class="p1">设置为16rem的p</p> <p class="p2">设置为16px的p</p> <p class="p3">设置为16em的p 父级没fontsize，相对于浏览器默认的16px</p> </div> </body> </html>
显示成这样子 👆 控制台检查会发现这几个p的字体大小一样
ps：相对单位们也可以给margin之类的属性用，我的理解是 大多数能用px的地方都能用相对单位，不能用的叉出来单独记
哦对还有%，很简单啊就是按照父元素的百分比计算~~~~
优质内容筛选与推荐>>1、jQuery 素材 缩略图轮播集合
2、用 wait-notify 解决生产者-消费者问题
3、《别做正常的傻瓜》后续笔记—幸福的准则
4、C#中三种传值的方法
5、IIS Express 7.5 HTTP 错误 500.22