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>