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的地方都能用相对单位，不能用的叉出来单独记

哦对还有%，很简单啊就是按照父元素的百分比计算~~~~