深刻理解css之line-height

前言

行高，顧名思義是一行文字的高度，而從規範上來講則是兩行文字基線之間的距離。行高是做用在每個行框盒子(line-box)上的，而行框盒子則是由內聯盒子組成，所以，行高與內聯元素能夠說是很是緊密，行高直接決定了內聯元素的高度（注意：這裏的內聯元素不包括替換元素）；對於塊級元素和替換元素，行高是沒法決定最終高度的，只能決定行框盒子的最小高度。

x、x-height以及ex

字母x在css裏面扮演着一個很重要的角色，由於字母x的下邊緣就是基線所在的位置。而x-height指的就是字母x的高度，ex是一個尺寸單位，其大小是相對字母x的來計算的，即1ex就表示1個字母x的高度。以下圖所示：

咱們在平時的開發中不多用到ex，由於ex是個相對單位。對於相對的東西，咱們老是感受很難控制，但這並不代表ex就一點用處都沒有。咱們能夠利用ex就是一個x-height的特性來實現圖標與文字的垂直居中，這樣如論字體大小如何變化，都不會影響垂直居中的效果。代碼以下：

.icon-arrow {
    display: inline-block;
    width: 20px;
    height: 1ex;
    background: url(down.png) no-repeat center;
    background-size: contain;
}

<div>
    <span>我是一段文本</span>
    <i class="icon-arrow"></i>
</div>

效果以下：

line-height的屬性值

• normal
• 數字
• 長度
• 百分比

normal

normal爲line-height的默認值，但並非一個固定的值，而是會受font-family的影響，對於「微軟雅黑」，其值爲1.32；而對於「宋體」，其值爲1.141。因爲不一樣操做系統，不一樣瀏覽器所使用的字體不同，因此最終line-height的具體值會不同，所以這個屬性做用不大。

數字

咱們能夠設置line-height: 1.5。其意思是說line-height的最終大小爲 1.5* font-size，通常建議使用該值來設置line-height。

長度

長度用的最多的就是px與em，em跟數字同樣，都是相對於font-size來計算的。

百分比

百分比也是相對於font-size來計算的。

相信細心的小夥伴已經發現了，數字，em以及百分比都是相對於font-size來計算的，既然這樣，爲何還要畫蛇添足設置另外兩個屬性呢。緣由就在於它們的繼承方式是不同的。對於數字，父元素設置了1.5，則子元素也是會繼承1.5。但若是父元素設置的是1.5em，假設父元素font-size是20px，則父元素line-height是30px，同時子元素的line-height也是30px，也就是說子元素繼承的是父元素計算後的line-height值。所以，這也是爲何上面推薦使用數字而不是em或百分比的緣由了。

行距與半行距

不少開發人員開還原設計圖的時候，每每沒有考慮到行距的影響，所以開發出來的頁面不少時候都與設計圖不符合，總會差那麼幾個像素。那麼什麼是行距呢，咱們能夠想象一下在文字排版的時候，若是行與行之間的間距爲0，則文字是會牢牢貼在一塊兒的，所以，行距就是用來協助排版的。行距的計算爲：line-height - em-box，em-box指的是1em的大小，所以行距能夠表示爲：line-height - font-size，假設line-height爲1.5，font-size爲20，則行距爲：
1.5*20 - 20 = 10，則最終行距爲10，而這個行距會平均做用於文字的上邊和下邊。但em-box咱們是沒法感知這個盒子在哪的，而內容區域咱們則能夠理解爲咱們選中文字後的背景色所在區域，而當字體是宋體的時候，內容區域和em-box是等高的，所以咱們能夠利用此揪出ex-box的藏身之處。以下圖所示：

正是由於行距的存在，咱們給元素設置margin值時，要減去相應的半行距值，這樣才能比較精確地還原設計圖。

line-height的應用

大部分時候，咱們設置line-height，都是爲了垂直居中對齊。但這裏的居中，只能說是近似居中，從上面的圖能夠看出：行距是上下均分的，可是內容區域不是，通常來講，文字都是偏下的。咱們平時設置字體通常都是12-20像素，這麼小的像素值，給出line-height值後，因爲上下相差不大，所以感受上是垂直居中的。line-height除了能夠做爲單行文本的居中對齊外，多行文本也是能夠的，代碼以下：

.box {
    width: 400px;
    line-height: 400px;
    padding: 0 10px;
    border: 1px solid #ccc;

}
.text {
    display: inline-block;
    line-height: 1.3;
    font-size: 14px;
    vertical-align: middle;
}

<p class="box">
    <span class="text">這是一段很長很長的文字，這是一段很長很長的文字，這是一段很長很長的文字，這是一段很長很長的文字，這是一段很長很長的文字</span>
</p>

效果以下：

前面的文章有說過，每個行框盒子前面都有一個看不見的，規範稱之爲「strut」的東西。咱們給.box設置了line-height爲400px，則這個「strut」的line-height也會繼承爲400px。而後咱們給.text設置inline-block，這樣咱們就能夠重置.box設置的line-height，又由於ineline-block保持了內聯特性，所以咱們能夠設置vertical-align以及產生「strut」，從而實現近似垂直居中對齊。

總結

• 介紹了字母x在css中的地位以及ex的應用
• line-height各類不一樣的屬性值以及數字、em和百分比的不一樣之處
• 行距在line-height的做用
• line-height實現單行垂直居中和多行垂直居中

參考：
《css世界》
https://developer.mozilla.org...