CSS進階（7）—— 內聯元素的掌管者line-height和vertical-align（上）

在CSS世界中，塊級元素通常負責結構，而內聯元素則負責文字內容，而CSS設計的初衷就是面向圖文混合排版，所以內聯元素在CSS世界中有着很是重要的地位。因爲本章內容較多，所以特分爲上下兩章，依舊能夠根據興趣按小標題獲取你所須要的信息。

1.字母x與CSS世界的基線

要了解內聯元素，就不得不提到字母x，正是有了x，內聯元素才肯定了本身的基線（baseline），有了baseline以後，纔有了line-height和vertical-align。所以在學習後面的內容以前，必需要了解一個概念：

字母x的下邊緣線就是內聯元素的基線（baseline）！

既然x那麼重要，所以CSS還給了它一個特殊的稱呼叫x-height。顧名思義，x-height指的就是小寫字母x的高度，那麼這個x-height有沒有用呢？答案是確定的，如vertical-align:middle的定義就是baseline往上1/2*x-height的位置，所以咱們看到的vertical-align:middle在font-size較大的時候會顯得不是特別「垂直居中」，由於不是每一個字/字母的高度都和字母x相同，或者說，大部分都是不相同的。

因爲vertical-align:middle須要基於x-height進行運算，那麼CSS乾脆給這個x-height一個名份，進一步衍生出了相對尺寸單位ex，1ex = x-height，所以這個單位會隨着font屬性的變化而變化，很是的不穩定，因此不太適合用來限定元素的尺寸，但某些狀況下，ex的表現至關出色。如：咱們須要以下效果

須要在文字後面加一個倒三角符號，這時候咱們要讓文字和圖標對齊可能會藉助vertical-align:middle，讓文字和圖片都基於中線對齊，事實上因爲文字自己是基於baseline排版的，這時候咱們只要讓icon也基於baseline佈局不就好了嗎？那怎麼讓圖標也基於基線佈局呢？加個height：1ex不就完事了嗎？以下所示：

<style> .icon-arrow { display: inline-block; width: 20px; height: 1ex; background: url(/images/5/arrow.png) no-repeat center; } </style>
複製代碼

2.內聯元素中真實存在的「行框盒子」

因爲以前沒有好好解析內聯盒子的基礎知識，這裏要補充一個關於內聯盒子的基礎內容，這對於學習後面的知識有必定的幫助。首先咱們須要明確兩個非官方概念：什麼是行框盒子以及行框盒子有什麼用？

什麼是行框盒子？事實上我並不敢說這是官方給出的一個盒模型，做者也沒有提到，但他彷佛真實存在於文字的每一行，並且是以行做爲計算單位的，也就是每一行文字（無論他們是否是一個內聯標籤或匿名標籤生成的），都在外面自動生成一個「行框盒子」。注意，這裏僅表明我從書本上獲取的觀點，在後面的幽靈節點中會繼續探討官方是否給出了這個盒子。這麼說可能不夠直觀，來看一個例子吧。

這是我用span標籤生成的一段話，他被瀏覽器自動分割成了兩行，你能夠理解每行文字的外包裹就是一個行框盒子。那麼何時會生成行框盒子呢？這裏我僅憑我的測試提出兩種生成行框盒子的狀況，第一種，就是非空內聯元素，注意這個非空，很關鍵，做者彷佛老是忽略空元素的測試，我本人則對空元素比較在乎。第二種，就是inline-block元素內部自動生成，注意這裏能夠爲空了，具體爲何我也不知道，測試結果如此。

第二個問題是，行框盒子有什麼用？做者爲何要提出行框盒子？由於這有助於咱們理解不少問題。首先來看下面這個測試代碼以及他們生成的結果。

<div style="background: yellow;">
    <span style="line-height: 40px">我行高40px</span>
    <span style="line-height: 60px">我行高60px</span>
    <span style="line-height: 30px">我行高30px</span>
    <span style="line-height: 90px">我行高90px</span>
</div>
複製代碼

此時div的角色就像是「行框盒子」，由於div包裹了一行「行框盒子」（這裏只有一行，兩行狀況又不一樣了），這樣作是爲了讓你更直觀的看到最終這些內聯元素最終生成的「行框盒子」，生成的高度是90px，也就是說，同一行！內聯元素生成的行框盒子的高度，取決於line-height最高的那個元素。爲了加深你對這個結果的印象，我再放一張圖，仍是剛纔那幾個元素，此次我把父容器div的寬度壓縮了。

最終結果跟上面測試的結論相同，第一行行高最高的是60px，第二行行高最高的是90px，兩個「行框盒子」一相加，獲得最終的150px，對於行框盒子的印象應該夠深了吧！

3.內聯元素的基石line-height

明白了行框盒子的概念以後，再來看line-height，就會容易的多了。做爲內聯元素的基石，line-height徹底掌控了內聯盒子的高度，注意，我說的是徹底掌控，跟font-size沒有半毛錢關係。

來思考一下下面這個問題，一個空的div的高度是0，在裏面寫上幾個字，他的高度就被撐開了，那麼這個高度是由何而來呢？首先能夠肯定的是，是由新增的文字撐開的，在內聯元素中，還有一類叫作「匿名內聯元素」的近親，他們外面沒有包裹任何內聯元素標籤，但事實上他們的表現跟內聯元素相同，只是不能單獨定義本身的樣式（固然能夠從父級去繼承一些過來，雖然繼承的權重最低，但總比沒有強）。好了，咱們知道這幾個字是匿名內聯元素了，所以高度是由這個內聯元素的高度撐開的，那麼這個內聯元素的高度又取決於什麼呢？下面咱們來作兩個測試。

如結果所示，最終撐開高度的是line-height，而不是font-size。注意這裏說的是非替換元素的純內聯元素，替換元素的概念能夠看一下以前的文章。以前說過padding和border能夠影響元素的高度，那麼在內聯元素中，是否也能夠呢？答案是：不行！但有些狀況下，視覺上仍是有一些誤差。以下測試

<div style="background: yellow">
    <span style="line-height: 40px;padding: 20px;border: 1px solid">我有padding和border</span>
</div>
複製代碼

因爲markdown編輯器支持標籤語言，所以咱們能夠直接預覽最終效果以下（小提示：你能夠經過瀏覽器直接檢查下面的元素看到CSS樣式）

我有padding和border

所以對於純內聯元素，他的高度計算只跟line-height相關。 line-height === 純內聯元素height ！！！

關於line-height的計算方式，做者「囉哩吧嗦」算了半天，我只總結成一個公式，line-height = font-size + 上半行距 + 下半行距 。對於CSS來說，font-size是已知的，所以他只須要計算半行距便可，至於它是怎麼算的，就不必深究了。我只講這個計算方式會致使一種狀況，第一行文字和最後一行文字的上方和下方都只有半行距的距離，中間部分則是一個行距，如對樣式有較高要求的能夠考慮一下這個因素，用其餘方式去彌補這裏的高度差。

4.line-height在塊級元素和內聯替換元素中的疲軟性

說完了line-height在內聯元素中的表現，再來講說line-height在塊級元素和內聯替換元素中承擔什麼樣的角色吧。

首先咱們先來看簡單的，line-height在塊級元素中承擔一個什麼樣的角色呢？答案是：屁用沒有。固然，本章第三點的第一個例子就是在塊級元素上直接寫line-height屬性，因此，仍是有那麼丁點做用的，這個做用是line-height無處不在的繼承屬性決定的，正好塊級元素內的匿名內聯元素本身寫不了樣式，那就只能繼承父級的line-height了，因此line-height最終仍是做用於內聯元素，而不是塊級元素。而後由內聯元素生成的行框盒子相加，撐開了塊級元素的高度。

既然line-height在塊級元素中沒用，那他在內聯替換元素中又有哪些表現呢？這個等講完vertical-align再總結。

5.深刻line-height的各種屬性值

本節的標題讓人以爲摸不着頭腦，line-height還有別的屬性？還真沒有，line-height就一個值，只是能夠有不一樣的類型。

line-height的默認值是normal，注意不是none，還支持數值，百分比值和具體長度值。

首先要了解一下這個看上去就不通常的normal，normal自己是一個跟font-family有關的變量，並且在不一樣的瀏覽器中還有不一樣的計算值，所以對於還原設計稿的這種要求，咱們不可能用默認的normal屬性，同時因爲line-height無處不在的繼承屬性，有時候不知不覺的你就把這個屬性給改了，所以normal屬性能夠不討論（咱們一切以實用性出發）。

實際上，咱們平時會設置line-height爲具體的數值，如line-height:xx像素。這種作法徹底適用於如今高要求的精緻網站，對於須要高保真還原設計稿的需求，徹底能夠用用具體數值。固然也有一種狀況你能夠用數字或百分比，就是如今有不少網站有本身的設計標準，如微信小程序，ant-design之類的，他們會要求文章內部的行高是字號的1.3-1.4倍，文章標題的的行高是字號的多少多少倍，這種狀況下你大能夠根據設計要求，用比例計算方式來寫行高。

這裏我只推薦用長度值（1，2，3），而不是百分比值（100%，200%），你可能以爲1不是等於100%嘛，其實我也這麼認爲，通常都是按照喜愛隨便挑一個。事實上，這裏面問題可大了去了。

長度值和百分比值的計算方式是徹底相同的。都是font-size*長度/百分比，向下取整，14*1.4 = 19.6 = 19px，注意不是四捨五入，是向下取整的。

那麼長度和百分比哪裏不一樣呢？答案是：繼承方式，就是line-height中無處不在的繼承方式不一樣。這裏咱們來看一個實例：

<div class="box box-1">
    <h3>標題</h3>
    <p>內容</p>
</div>
<div class="box box-2">
    <h3>標題</h3>
    <p>內容</p>
</div>
<style> .box { font-size: 14px; } .box-1 { line-height: 1.5; } .box-2 { line-height: 150%; } </style>
複製代碼

結果以下圖所示：

最終表現得結果不同，問題就在於這個繼承方式。

使用數值，line-height = 自己的font-size*數值

使用百分比，line-height = 繼承來的line-height*數值

你會發現，一個是基於自身的font-size，一個是基於繼承的line-height，徹底不一樣，並且數值在大多數狀況下的表現更優，也更符合實際狀況。因此我我的推薦不要用line-height的百分比值，就當沒聽過。

6.內聯元素line-height的「大值特性」

其實這個問題並不能單純的理解爲，內聯元素line-height取最大那麼簡單，其中還包含以前所說的「行框盒子」的內容，以及行框盒子產生的幽靈節點。在探索大值特性以前，咱們得先了解一下，幽靈節點是什麼。來看具體的實例：

<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<div style="background: yellow"><span style="display: inline-block;"></span></div>
</body>
</html>
複製代碼

注意這段代碼必需要有聲明。這段代碼的結果是:

這裏的span標籤的高度確實是0，那麼到底是什麼撐開了div的高度呢？就是上面提到的「幽靈空白節點」，你能夠想象這個幽靈空白節點是一個沒有寬度的空白節點，固然你不要去dom結構裏找他，確定是找不到的。在瞭解幽靈空白節點以前，先得知道，何時會出現這個幽靈空白節點，根據個人測試，結果跟做者的描述相同。

產生行框盒子的前面自動生成幽靈空白節點。因爲以前提到了，inline-block元素內部能夠生成幽靈空白節點，所以這裏確實存一個一個看不見的內聯元素，且他有本身的line-height。

幽靈空白節點的line-height = font-size（默認12px） * normal,所以這個幽靈空白節點就有本身的高度了，有本身的高度就撐開了inline-block的高度，inline-block又撐開了父容器的高度，那麼如今就一切都說得通了。

作好了一切的準備工做，最後作個總結和檢測，理解了下面這個案例，你就真正理解了內聯元素的line-height。

<div class="box box1">
    <span>span: line-height:20px</span>
</div>
<div class="box box2">
    <span>span: line-height:96px</span>
</div>
<style> .box { width: 280px; margin: 1em auto; outline: 1px solid #beceeb; background: #f0f3f9; } .box1 { line-height: 96px; } .box1 span { line-height: 20px; } .box2 { line-height: 20px; } .box2 span { line-height: 96px; } </style>
複製代碼

因爲markdown編輯器支持標籤語言，所以咱們能夠直接預覽最終效果以下（小提示：你能夠經過瀏覽器直接檢查下面的元素看到CSS樣式）

span: line-height:20px

span: line-height:96px

上面這兩個box最終獲得的高度是同樣的，爲何會這樣呢？

剛纔說到，每一個非空內聯元素外面都會生出一層「行框盒子」，而每一個行框盒子左邊就有一個幽靈空白節點，box1>span的line-height是20px，但他隔壁住了個幽靈空白節點，繼承了父元素的line-height:96px，咱們已經知道行框盒子的高度是由最高的內聯元素的行高決定的，所以box1的最終高度和box2的相同，都是96px。

本章內容過於多，vertical-align就放到下章講，學了vertical-align以後咱們再來看如何結合二者實現多行元素的垂直居中展現，有興趣的能夠關注後續文章，點個關注。

不忘初心，方得始終

喜歡博主的童鞋能夠掃描二維碼加博主好友~ 也能夠掃中間二維碼入駐博主的粉絲羣（708637831）~固然你也能夠掃描二維碼打賞並直接包養帥氣的博主一枚。