干嘛用的就不說了安岂，說說取值問題轻猖，有三種取值：
- 單位值：em帆吻、px等
- 百分值：100%，200%等
- 數(shù)字值：1咙边，2等
這里猜煮，我們會發(fā)現(xiàn)，三類值中各有“相對值”的定義方式败许，百分比和數(shù)字值本身就是“相對值”王带，單位值中，em/rem等也是“相對值”市殷。
撇開rem不看愕撰，em/百分比/數(shù)字值都是相對于“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醋寝。
單純這么看搞挣，好像這三個沒啥區(qū)別。然而音羞，真是這樣的嗎囱桨？
<!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>這里，我們會發(fā)現(xiàn)嗅绰，三類值中各有“相對值”的定義方式舍肠，百分比和數(shù)字值本身就是“相對值”，單位值中窘面，em/rem等也是“相對值”翠语。撇開rem不看，em/百分比/數(shù)字值都是相對于“font-size”值的财边，比如</p>
</div>
<div class="use-percent">
<h1>* 百分比</h1>
<p>這里啡专，我們會發(fā)現(xiàn)，三類值中各有“相對值”的定義方式制圈，百分比和數(shù)字值本身就是“相對值”们童，單位值中畔况，em/rem等也是“相對值”。撇開rem不看慧库，em/百分比/數(shù)字值都是相對于“font-size”值的跷跪，比如</p>
</div>
<div class="use-number">
<h1>* 數(shù)字值</h1>
<p>這里，我們會發(fā)現(xiàn)齐板，三類值中各有“相對值”的定義方式吵瞻，百分比和數(shù)字值本身就是“相對值”，單位值中甘磨，em/rem等也是“相對值”橡羞。撇開rem不看，em/百分比/數(shù)字值都是相對于“font-size”值的济舆，比如</p>
</div>
</body>
</html>
把這坨代碼搞一下卿泽，瀏覽器打開看看，會看到這樣的結(jié)果：
em滋觉、百分比和數(shù)字的line-height真的這么單純嗎
是的签夭，你沒有看錯。從效果來看椎侠，em和百分比是一個樣的第租，行與行之間出現(xiàn)了遮擋，而數(shù)字值的line-height卻完全不一樣我纪，行間卻很“完美”的顯示著慎宾。由此可見，雖然都是“相對于font-size”浅悉，但是趟据，em/百分比和數(shù)字值卻有著不一樣的計算規(guī)則，具體的規(guī)則可以去www.w3.org找仇冯，這邊我就簡單總結(jié)一下：
- line-height是有繼承性的
- 使用em和百分比之宿，line-height的計算值是“相對于font-size”的值
- 使用數(shù)字值，line-height的計算值還是原來的數(shù)字值
- 子元素繼承的是父元素的line-height的計算值
依據(jù)這4條規(guī)則苛坚，再回頭看上面的例子比被，就可以知道為什么了~~都是聰明人，就不再說了泼舱。而等缀，等你真正理解后，你會發(fā)現(xiàn)娇昙，實際上中間兩條沒啥用尺迂。
