行框基線位置肯定（line box 基線）

在設置vertical-align屬性（只有inline元素有效，對inline-block和block元素無效）時有一個屬性值：baseline，那麼這個基線是什麼，怎麼肯定。

這個基線就是其所在行的line box基線。設置vertical-align：baseline 屬性就是設置其自己元素的inline box（行內框）的基線與行框的基線對其。這裏咱們是肯定的行框的基線，知道行框基線，那行內框基線就知道了。

有這樣一個關係

　　line-height，font-size

　　　　　　丨

　　　　　　丨 決定

　　　　　　丨

　　　　inline box 的高度

　　　　　　丨

　　　　　　丨 line box 中的全部 inline box 中最高的 inline box 的頂部 和最低的 inline box 的底部高度之差就是 line box 的高度

　　　　　　丨

　　　　line box 高度

　　　　　　丨

　　　　　　丨 在line box 中直接寫一個字母 X （這個字母不包含在其餘標籤裏面），X的底部位置就是 line box 的基線位置

　　　　　　丨

　　　　line box 基線（補充：行高（line-height） 的值等於相鄰兩行基線之間的距離，行距：等於上一行底線和下一行頂線之間的距離）

　　　　　　丨

　　　　　　丨 知道了line box 基線，由於inline box 不設置vertical-align 狀況下，默認基線是與 line box 基線對齊的，因此就知道了 inline box 的基線。（若是設置了vertical-align 

　　　　　　丨其餘屬性值，那麼基線的位置會相對line box 有所調整

　　　　inline box 基線（有些標籤的基線也不是這樣肯定的，如img標籤的基線是圖片的底部，textarea標籤的基線也是底部）

 

參考文章：http://www.w3school.com.cn/cssref/pr_pos_vertical-align.asp

　　　　　https://www.cnblogs.com/yangjie-space/p/4858132.html