CSS line height 介紹

1. line-height行高的定義就是兩基準之間的距離
2. vertical-align預設值就是基準（基準是字型本身的東西）
3. 字母X的下邊緣就是基準
4. x-height:代表的的就是基準和等分線之間的距離
5. vertical-align: middle,需要注意的是，middle和median(midline)的區別，這兩者並不等價，嚴格來講，middle指的是基準（baseline）往上1/2‘x-height’的高度，因此，我們近似可以把middle腦補成字母X的交叉點
因此可見，vertical-align:middle並不是絕得的垂直置中，平常看到的middle效果只是一種近似的效果，嚴格的垂直置中應該是基於baseline來的置中。
6. 尺寸單位ex:這是CSS中的一個相對單位，指的是小寫字母x的高度，其實ex就是代表了x-height而已
ex的價值：不受字型字型大小影響的內嵌元素的垂直置中效果，也即是ex就是一個相對於字型字型大小的單位。
7. 行高：是指上下文本行的基準間的垂直距離 = ① + ② + 2*③ + ④
8. 行距：是指一行底線到下一行頂線之間的垂直距離 = 2*③;即使不是設定line-height,只是設定font-size,行距也是預設不為0的，行距在沒有line-height影響下時，會隨著font-size的大小變化而動態改變
9. font-size: 頂線和底線之間的垂直距離 = ① + ② + ④ = 行高 - 行距 10. 內容區就是一行內底線和頂線之間的距離，也就是font-size的面積 11. line-height再用到一個區塊層級元素時候，則定義的是元素中基準之間的最小間距 12. 像素是相對單位長度，實現對於顯示器螢幕封邊路而言的 13. em是相對單位長度，相對於當前對象內文本的字型尺寸，如果當前行內文本的字型尺寸未被設定，則相對的是瀏覽器的預設字型尺寸，所以預設情況下1em = 16px, 12px = 0.75em 14. 所謂的padding是從font-size之外的部分開始向外延伸的，也就是內容區以外擴充的地區，因此，padding的地區會和半行距重合起來，如果font-size>=行高的話，那麼半行距==0，半行距不可能小於0 15. 在預設情況下, line-height是當前font-size大小的1.14倍，得到的結果四捨五入，如果結果為奇數，上下分成上下半邊距（|上半邊距-下半邊距| == 1）；如果是偶數，則均分成上下兩個相等的半邊距，因此，當font-size的大小是0的時候，也未必圖片就能絕對的垂直置中，之後當line-height-圖片size==偶數時才是絕對的置中，但是，對於不同的瀏覽器，分配方式和預設值1.14可能不同 16. 如果字型大小為0，這時候的基準是一個點或者是一條線，不同的瀏覽器有不同的差異， 總而言之，對於上面提到的很多線之間的距離並不是固定的或者是對稱的，需要擺脫定勢思維 17. 從下面的第二個圖可以看出，局對局中的位置在不考慮上下半邊距影響的情況下，只和字型的大小有關，而中線的確定也只和字型大小有關，可以確定的是，隨著字型的變大，中線位置和絕對置中位置的差距會越來越大。 18. 一個inline-block元素，如果裡面沒有inline內嵌元素，或者overflow不是visible，則該元素的基準就是其margin底邊緣，否則，其基準就是元素裡面最後一行內嵌元素的基準。