font-size属性不被直接继承：只有计算值(em或百分比时)被继承，而不是整个声明被继承。
特点：
- 仅被传递到子元素
- 单位em或百分比时被继承
字体大小计算时有很奇怪的边缘效果。例如：我们对一个<div>元素使用80%的相对字体大小，其他嵌套在<div>元素中的元素同时也会继承该大小这意味着其他元素的字体大小将是80%乘以80%，即64%。
示例：
- 代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.divRoot {
font-size: 40px;
}
.divChild {
font-size: 50%;
}
.divGrandson {
font-size: 50%;
}
.div20px {
font-size: 20px;
}
.div05em {
font-size: 0.5em;;
}
</style>
</head>
<body>
<div class="divRoot">
divRoot 40px
<div class="divChild">
divChild : 40px*50% = 20px
<div class="divGrandson">divGrandson : 40px * 50% * %50% = 10px</div>
<div class="div05em">div05em: 0.5em = 40px * 50% * 0.5 = 10px</div>
<div class="div20px">div20px : 20px</div>
</div>
<p>divRoot</p>
</div>
</body>
</html>
-
示例结果：
解决方案：
- 只在一个级别上使用相对字体大小；
- 使用px作为单位来指定该元素的特定实例，即不使用全局的元素选择器，而是使用元素选择器和ID选择器的组合;
- 使用rem替代em作为字体单位；
网友评论