您的位置：首页 > Web前端 > CSS

em unit in font-size

2017-02-25 13:45 295 查看

这是参考链接

em：以从父元素继承的字体大小作为基本单位

使用em作为单位的值是动态变化的，

font-size:1em;

此时 1em 等于设置的元素的父元素的字体大小(),

同理 2em 就是两倍父元素字体的大小

如果没有设置父元素的字体大小，

那么1em就是浏览器的默认大小即 1em = 16px

em 和 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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： font-size css

相关文章推荐

新的分享

章节导航