一、line-height的定義
css中line-height行高是指文本行基線之間的距離，不同字體，基線位置不同。line-height只影響行內元素和其他行內內容，而不會直接影響塊級元素，如果塊級元素設置了line-height，這個值只會應用到塊級元素里面的內聯內容時才會有影響。在塊級元素上聲明line-height會為該塊級元素的內容設置一個最小行框高度。
二、line-height與行內框盒子模型
<p>hello world<em>this is em</em></p>這樣一行普通的代碼，包含了4種盒子，如下：
辦公資源網址導航 https://www.wode007.com
1.“內容區域”（content area）
圍繞文字看不見的盒子，內容區域的高度大小只與font-size的大小和font-family有關，在simsun宋體字體下，內容區域高度等於文字大小。
2.“內聯盒子”（inline boxes）
內聯盒子（inline boxes），不會讓內容成塊顯示，而是排成一行。如果外部含inline水平標簽，則屬於內聯盒子；如果是個光禿禿的文字，則屬於”匿名內聯盒子“。
3.行框盒子（line boxes）
每一行就是一個行框盒子，每一個行框盒子又是由一個個內聯盒子組成。
4.包含盒子（containing box）
由一行行行框盒子組成。
三、line-height與內聯元素的高度機理
關於內容區域高度：①內容區域高度只與字體以及字號有關，與line-height沒有任何關系；②在simsun字體下，內容區域高度等於文字大小值。
行的高度不是由於行高造成的。因為：①行高由於其繼承性，影響無處不在，即使單行文本也不例外；②行高這是幕后黑手，高度表現不是行高，而是內容區域和行間距。只不過：行間距 = line-height - font-size
行間距一般是上下均分的。
總結：行高決定內聯盒子高度；行間距牆頭草，可大可小可負值，保證高度正好等同於行高。
四、line-height的不同屬性值
line-height:normal/<number>/<lenght>/<percent>/inherit;
normal：默認屬性值。與瀏覽器和元素字體相關。因此為了讓各個瀏覽器兼容性一致，要初始化line-height。
<number>：使用數值作為行高值。line-height = number * font-size
<lenght>：使用具體長度值作為行高值。em/rem/px/pt
<percent>：使用百分比作為行高值。line-height = percent * font-size
inherit：行高繼承。IE8+
問題：line-height:1.5/150%/1.5em的區別
答：計算無差別。1.5所有可繼承元素根據font-size重新計算行高；150%/1.5em當前元素根據font-size計算行高，繼承給下面的元素。
body全局數值行高使用經驗：
匹配20px使用，為了方便心算：line-height = 20px / 14px = 1.42857
由於chrome是19px，所以body{font-size:14px;line-height:1.4286;}
五、line-height實際應用
1、圖片水平垂直居中 （ie8+）
.box{line-height:300px;text-align:center;} .box>img{vertical-align:middle}2、多行文本水平垂直居中(ie8+)
.box{line-height:250px;text-align:center;} .box>.text{display:inline-block; line-height: nomal; text-align:left;vertical-align:middle;}3、用line-height代替height，避免ie6/ie7的haslayout
{height:36px;line-height:36px;}其實可以直接簡寫成：
{line-height:36px;}