真正的能理解CSS中的line-height，height與line-height

https://blog.csdn.net/a2013126370/article/details/82786681

在最近的項目中，經常用到line-height，只是簡單的理解爲行高但並無深層次的理解，導致不能達到信手拈來的感受。在此作一下總結，一是更深層次的瞭解什麼是line-height，二是比較height與line-height的區別。

基本概念
行高與行距從字面的意思是很是容易理解的，可是對佈局和樣式來講，咱們應該更深刻的理解各個屬性之間的關係，好比line-height與font-size存在什麼關係呢，line-height與所屬元素的height又有什麼聯繫呢？。好了，帶着疑問，咱們一同探究。
行高是指文本行基線間的垂直距離。 基線（base line）並非漢字文字的下端沿，而是英文字母「x」的下端沿。下圖中兩條紅線之間的距離就是行高，上行的底線和下一行頂線之間的距離就是行距，而同一行頂線和底線之間的距離是font-size的大小，行距的一半是半行距。

從上圖咱們就能夠看出，行距、font-size與line-height之間的關係了吧。接下來進一步來看看這三者關係

當font-size等於line-height時，行距 = font-size - line-height = 0；而當font-size大於line-height時，則會出現行距爲負值，則兩行重疊，以下圖：

關於CSS boxes的四種類型（containing boxes、inline boxes、line boxes、content area）和line-height五種取值方法（line-height:normal;、line-height:inherit;、line-height:120%;、line-height:25px;、line-height:1.2）。參見如下資料：
深刻了解css的行高Line Height屬性
[學習筆記] css中的line-height
接下來將講一講height和line-height的聯繫
CSS中起高度做用的應該就是height以及line-height。height是用來設置元素的高度，好比img的高度、div的高度等。以一個div爲例，來進一步說明兩個問題：
第一個問題：若是不設置div的高度時，是div的font-size決定了div的高度仍是line-weight的值。不防來寫段代碼進行直觀的說明

CSS:
.test1{font-size:20px; text-align:center;line-height:0; border:1px solid black; background: red;}
html:
<div class="test1">測試</div>
1
2
3
4
顯示結果（圖1）：

CSS:
.test2{font-size:1px; text-align:center;line-height:20px; border:1px solid black; background:red;}
html:
<div class="test2">測試</div>
1
2
3
4
顯示結果（圖2）：

由圖1和圖2可知，在沒有設置div的height屬性時，div的高度根據line-height的大小而變化，且文字垂直居中。
第二問題：div的height與line-height的大小關係不一樣時，會有什麼顯示結果呢？
（1）height = line-height時

（2）height>line-height時

（3）height<line-height時

能夠經過「測試」兩個字在頁面上的位置，能反映出height與line-height的大小關係。若是經過上面的學習，沒有疑問的話，能夠說初步理解了line-height。如若以上並無使你柳暗花明，敬請諒解，若是有什麼問題，可留言咱們討論。————————————————版權聲明：本文爲CSDN博主「一塊兒的遠方」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處連接及本聲明。原文連接：https://blog.csdn.net/a2013126370/article/details/82786681