慕課學習-->前端開發-->HTML/CSS-->CSS深入了解之line-height
line-height
一、line-height的定義
行高line-height，兩行文字基線之間的距離。
1、什麼是基線？字元（x）下邊緣
2、為什麼是基線？基線是*線定義之根本。
3、需要兩行麼？不需要，兩行的定義決定了一行的表現
行高line-height可以讓單行文本垂直居中？
其實并不是真的垂直居中，隻是看起來居中。
二、line-height與行内框盒子模型
所有内聯元素的樣式表現都與行内框盒子模型有關！例如浮動的文字環繞效果......
<p>這是一行普通的文字，這裡有個 <em>em</em> 标簽</p>
上面是一行普通的文字，有個em标簽。但是卻包含了4中盒子。
1、“内容區域”（content area），是一種圍繞文字看不見的盒子。“内容區域”（content area）的大小與font-size大小相關。
2、“内聯盒子”（inline boxes），“内聯盒子”不會讓内容成塊顯示，而是排成一行。如果外部含inline水準的标簽（span，a，em等），則屬于“内聯盒子”。如果是光秃秃的文字，則屬于“匿名内聯盒子”；
3、“行框盒子”（line boxes），每一行就是一個“行框盒子”，每個“行框盒子”又是由一個一個“内聯盒子”（inline boxes）組成；
4、<p>标簽所在的“包含盒子”（containing box），此盒子由一行一行的“行框盒子”（line boxes）組成。
了解行内框盒子模型，對了解line-height有什麼現實意義？
三、line-height的高度機理
<p>這是一行普通的文字，這裡有個<em>em</em>标簽</p>
這是一行普通的文字，這裡有個em标簽。
console.log(document.querySelector("p").clientHeight);//p标簽的高度
元素高度從何而來？是裡面的文字撐開的？不是的。
元素p的高度是由line-height行高決定的
内聯元素的高度是由line-height決定的！
Line-height明明是兩基線距離，單行文字哪來行高，還控制了高度？
（1）行高由于其繼承性，影響無處不在，即使單行文本也不例外；
（2）行高隻是幕後黑手，高度的表現不是行高，而是内容區域和行間距。隻不過正好：内容區域高度（content area）+ 行間距（vertical spacing）= 行高（line-height）
内容區域：
（1）内容區域（content area）高度隻與字号（font-size）以及字型（font-family）有關，與line-height沒有任何關系。
（2）在simsun宋體字型下，内容區域高度等于文字大小值。也就是說，在simsun字型下：font-size + 行間距 = line-height
（3）行間距上下拆分就有了“半行間距”。
行高決定内聯盒子高度；行間距牆頭草，可大可小（甚至負值），保證高度正好等同于行高。
如果行框盒子裡面有多個不同行高的内聯盒子，高度如何表現？
（1）舉例：
<p>這是一行普通的文字，這裡有個<em style=”line-height:80px”>em</em>标簽</p>
這是一行普通的文字，這裡有個em标簽。
console.log(document.querySelector("p").clientHeight);//p标簽的高度
<p>的高度是80px
<p>這是一行普通的文字，這裡有個<em style="line-height:80px;vertical-align:40px;">em</em>标簽</p> <p>的高度為98px
（2）如果行框盒子裡面有多個不同行高的内聯盒子，高度并不一定等于高度最高的内聯元素的高度。
含多個行框盒子的包含容器
多行文本的高度就是單行文本高度累加。
若行框盒子裡面混入inline-block水準元素（如圖檔），高度如何表現？
四、line-height各類屬性值
1、line-height支援的屬性值
Normal、<number>、<length>、<percent>、inherit
（1）line-height:normal，預設屬性值，跟着使用者的浏覽器走，且與元素字型關聯。
在Chrome浏覽器下，微軟雅黑的normal值為1.32（字型占據的高度/字型大小）
在Chrome浏覽器下，宋體的normal值為1.14
（2）line-height:<number>，使用數值作為行高值。例如：line-height:1.5，根據目前元素的font-size大小計算。假如文字大小（font-size）20px，則行高為1.5*20px=30px
（3）Line-height:<length>，使用具體長度值作為行高值。例如：line-height:1.5em，line-height:1.5rem，line-height:20px，line-height:20pt。
（4）Line-height:<percent>，使用百分比作為行高值。例如：line-height:150%，相對于設定了該line-height屬性的元素的font-size大小計算。假設文字大小font-size為20px，則行高值為20px*150%=30px
（5）Line-height:inherit，行高繼承（IE8+），例如：input{line-height:inherit;}，input框等元素預設行高是normal，使用inherit可以讓文本框樣式可控性更強。
2、line-height:1.5，line-height:150%，line-height:1.5em，有什麼差別？
（1）line-height:1.5，所有可繼承元素根據font-size重計算行高；
（2）line-height:150%/1.5em，目前元素根據font-size計算行高，繼承給下面的元素。
3、body全局數值行高使用經驗：body{ font-size:14px; line-height:1.5; }
比對20像素的使用經驗，line-height=20px/14px=1.4285714...
body{ font-size:14px; line-height:1.4286; }
五、line-height與圖檔的表現
1、行高會不會影響圖檔實際占據的高度？
行高不會影響圖檔實際占據的高度！
2、消除圖檔底部間隙的方法
（1）圖檔塊狀化---無基線對齊，img{ display:block;}
（2）圖檔底線對齊，img{ vertical-align:bottom;}
（3）行高足夠小 -- 基線位置上移，.box{ line-height:0;}
3、小圖檔和大文字，基本上高度受行高控制
六、Line-height的實際應用
1、實作：大小不固定的圖檔、多行文字垂直居中
（1）大小不固定的圖檔垂直居中（近似垂直居中）
<style>
.box {
line-height:200px;
text-align:center;
background:#eee;
}
.box>img{vertical-align:middle;}
</style>
<div class="box">
<img src="1.png">
</div>
（2）多行文字垂直居中（也是近似垂直居中）
<style>
.box {
line-height:200px;
text-align:center;
background:#eee;
}
.box>.text{
display:inline-block;
line-height:normal;
text-align:left;
vertical-align:middle;
}
</style>
<div class="box">
<div class="text">多行文字水準垂直居中實作的原理跟圖檔水準垂直居中是一樣的，差別在于要把多行文本所在的容器的display水準轉換成和圖檔一樣，也就是inline-block，以及重置外部繼承的text-align和line-height屬性值。</div>
</div>