最近看到一些关于em的问题，好多人对于em都有疑惑，到底是继承父级还是基于自己的font-size，在这里，我就发表一下我自己的看法，希望有错误欢迎各位大佬指出。
个人观点
em是基于继承的一种单位，如果没有父级，那么em就没有存在的意义。所以em是继承父级而产生的一种尺寸响应式的单位。
论证案例 1
指定body中font-size尺寸，让内部元素都有父级可以继承。
<style>
body{
font-size: 10px;
}
div{
font-size: 2em;
}
p{
font-size: 2em;
}
</style>
<body>
BODY
<div>
DIV
<p>我是最可爱的em单位~</p>
</div>
</body>
论证案例1效果图
论证案例1解析: 在这里，p元素的大小为40px，为什么？因为div的尺寸2em继承了body，所以div的尺寸变为了20px；然后p指定了尺寸为2em，所以p的尺寸在继承父级div的尺寸20px的基础上，乘以了2，所以p的尺寸就是40px；由此可见P元素的尺寸继承了父级DIV的尺寸之后，再做的自身的算法。
论证案例 2
不指定p的尺寸，看看效果。
<style>
body{
font-size: 10px;
}
div{
font-size: 2em;
}
</style>
<body>
BODY
<div>
DIV
<p>我是最可爱的em单位~</p>
</div>
</body>
论证案例2效果图
论证案例2解析: 在这里，p元素没有指定自身的font-size，所以直接继承父级div的font-size，为20px;如果这里p的font-size为2em，而div不设置font-size，那么p直接接着往上继承body的font-size。由此可见，就算自身不设置尺寸，P元素也是直接继承的父级DIV尺寸。
论证案例 3
很多朋友就要问，如果不指定body的尺寸或者根的尺寸，p的父级就没有指定font-size了呀？为什么p自身还是有尺寸？那我们接着往下看。
<style>
p{
font-size: 2em;
}
</style>
<body>
BODY
<div>
DIV
<p>我是最可爱的em单位~</p>
</div>
</body>
论证案例3效果图
论证案例3解析: 在这里，body并没有指定font-size，div也没有指定，为什么p还是有尺寸呢？看吧，我们就说em是基于自身，根本不是你说的继承，全部都是扯淡，看到这里，如果看官觉得有理的话，那我就醉了，为什么呢？因为即使你不给:root或者body指定font-size，他们都是有默认值的啊，每个浏览器的body都是有默认值的，所以无论你设不设置他们的尺寸，他们都有值的，所以在这里，p直接继承了body的尺寸，2em就是2 x body默认尺寸。
个人推荐 ： 最好使用rem，每个元素都直接继承:root，更灵活一些。
所以在最后，我个人是认为em是继承父级而存在的单位， 如果本人观点有任何不对的地方，欢迎大佬们指点。
说明
原创作品，禁止转载和伪原创，违者必究！
网友评论