干嘛用的就不说了，说说取值问题，有三种取值：
- 单位值：em、px等
- 百分值：100%，200%等
- 数字值：1，2等
这里，我们会发现，三类值中各有“相对值”的定义方式，百分比和数字值本身就是“相对值”，单位值中，em/rem等也是“相对值”。
撇开rem不看，em/百分比/数字值都是相对于“font-size”值的，比如
.one {
font-size: 20px;
line-height: 2em;
}
.two {
font-size: 20px;
line-height: 200%;
}
.three {
font-size: 20px;
line-height: 2;
}
这三个class最终line-height计算值都是40px。
单纯这么看，好像这三个没啥区别。然而，真是这样的吗？
<!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>测试下line-height</title>
</head>
<body>
<style>
div {
outline: 1px solid #f80;
margin: 3em;
padding: 2em;
font-size: 13px;
}
div h1 {
color: #f80;
padding-bottom: .5em;
border-bottom: 1px solid #f80;
}
/* 下面是正题 */
div p {
font-size: 2em;
}
.use-em {
line-height: 1.5em;
}
.use-percent {
line-height: 150%;
}
.use-number {
line-height: 1.5;
}
</style>
<div class="use-em">
<h1>* em</h1>
<p>这里，我们会发现，三类值中各有“相对值”的定义方式，百分比和数字值本身就是“相对值”，单位值中，em/rem等也是“相对值”。撇开rem不看，em/百分比/数字值都是相对于“font-size”值的，比如</p>
</div>
<div class="use-percent">
<h1>* 百分比</h1>
<p>这里，我们会发现，三类值中各有“相对值”的定义方式，百分比和数字值本身就是“相对值”，单位值中，em/rem等也是“相对值”。撇开rem不看，em/百分比/数字值都是相对于“font-size”值的，比如</p>
</div>
<div class="use-number">
<h1>* 数字值</h1>
<p>这里，我们会发现，三类值中各有“相对值”的定义方式，百分比和数字值本身就是“相对值”，单位值中，em/rem等也是“相对值”。撇开rem不看，em/百分比/数字值都是相对于“font-size”值的，比如</p>
</div>
</body>
</html>
把这坨代码搞一下，浏览器打开看看，会看到这样的结果：
em、百分比和数字的line-height真的这么单纯吗
是的，你没有看错。从效果来看，em和百分比是一个样的，行与行之间出现了遮挡，而数字值的line-height却完全不一样，行间却很“完美”的显示着。由此可见，虽然都是“相对于font-size”，但是，em/百分比和数字值却有着不一样的计算规则，具体的规则可以去www.w3.org找，这边我就简单总结一下：
- line-height是有继承性的
- 使用em和百分比，line-height的计算值是“相对于font-size”的值
- 使用数字值，line-height的计算值还是原来的数字值
- 子元素继承的是父元素的line-height的计算值
依据这4条规则，再回头看上面的例子，就可以知道为什么了~~都是聪明人，就不再说了。而，等你真正理解后，你会发现，实际上中间两条没啥用。
网友评论