em:以从父元素继承的字体大小作为基本单位
使用em作为单位的值是动态变化的,
font-size:1em;
此时 1em 等于设置的元素的父元素的字体大小(),
同理 2em 就是两倍父元素字体的大小
如果没有设置父元素的字体大小,
那么1em就是浏览器的默认大小即 1em = 16pxem 和 px 的转换公式:
?em = 你想设置的字体大小(in piex) / 父元素的字体大小(in piex)
如:
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-size:20px
}
#inner{
font-size:1em;
}
#outer{
font-size:1em;
}
div{
font-size:1.5em;
}
</style>
</head>
<body>
<div>这是div内的文本 <!--1.5em = 父元素body的font-size*1.5 = 30px-->
<p id = "inner"> <!--1em = 父元素div的font-size*1 =30px -->
这是div中的p段落中的文本
</p>
<div > <!--1.5em = 父元素div的font-size*1.5 =30*1.5 = 45px -->
这是div中的div的文本
</div>
</div>
<p id = "outer"> <!--1em = 父元素body的font-size*1 =20*1 = 20px -->
这是div外部的段落的文本
</p>
</body>
</html>