（1-1）line-height的定義和與行內框盒子模型的關係

一、line-height的定義

line-height的定義： 行高，又稱為兩基線的距離。預設基線對齊（因為CSS所有*線：總之就是各種定義的線都是和基線對齊的）

預設X對齊。

下面貼出一個超大超大的大圖： 

注意！！不同字型下的基線位置會稍微有點變化，可能會有上浮或者下沉噢。

基線，和行高的一些作用和表現機理 兩基線的距離即為行高

二、line-height和行內框盒子模型

所有內聯元素的樣式表現都和行內框盒子模型有關

 1、

2、

3、

4、

那麼我們瞭解行內框盒子模型，對我們瞭解行高有什麼作用呢？有些人可能有這些疑問，

來，看這裡

為什麼P元素有高度哪來的呢，是font-size嗎？？ no、no、no實際上是由行高確定的

　　有些人有這個疑問。line-height明明是兩基線的距離，單行文字哪來的行高，還控制了高度？？

　　行高有繼承性，即使是單行文字也是有行高的。而且實際上控制高度的不是line-height（line-height 就是行高），而是幕後黑手。內容區域和行間距；

不過~~~~ 行高等於內容高度+ 上下半間距；

1、內容區域高度只和字號以及字型有關，和line-height沒有半點關係。

2、網上有的說字型大小就是內容區域高度這個是不對的，只有在simsum 字型下，才完全相等。

　　那為什麼font-size不一定等於內容區域高度，那麼為什麼行高行高還等於font-size+ 上下半間距呢？？  因為上下半間距是可以為負值跟隨行高和內容高度變化的

那麼單行行內框盒子是不是為內聯最高行高決定呢？ 答案是不一定的，會受到其他的（例如vertical-align）干擾，

多行行內框盒子當然就是每個單行行內框盒子的總和了

---------------------------------------------------------分割線---------------------------------------------------

小編碼字找圖不易，覺得好可以關注，後續還有繼續推文噢

       　　讚賞小編一個跳跳糖~~~