CSS的inline、inline-block

CSS inline、inline-block

本文將介紹內聯佈局中，內容的佈局方式及相關原理。

inline box 與 line box

對於行框、內聯框，標準文檔中有個很經典的圖。

附上本身的一段代碼，方便理解。

<div style="width: 200px; margin: auto;">
    這是一段代碼，又長又好看的代碼。
    <span style="color: red">這是inline box</span>
    這又是一段代碼，又長又好看的代碼。
</div>

上圖中：藍色區域表明inline box，表示一個行內的元素框；紅色區域表明line box，每一行的區域均可以表示line box；綠色區域表明root inline box，表示行內區域內不被元素包裹的內容，這裏表示沒有任何元素包裹的文字。

baseline基線

在內聯模型中，涉及到垂直方向的對齊，都離不開基線的定義。咱們一般所說的基線：就是英文字母'x'的下邊緣線。(以下圖baseline紅線)

其中涉及到一個概念叫作「x-height」，所指的就是字母'x'的高度。也就是median(中線)與基線之間的距離。

值得注意的是，最多見的vertical-align: middle，所指示的位置不是median，而是1/2 x-height的高度。

對於inline-block元素來講，它的基線取決於元素自己的特性，在該元素中沒有行內子元素（注意是DOM樹的子元素，有塊子元素不算或者塊子元素中有行元素這個行元素算）的時候或者overflow不爲visible，該inline-block的基線爲margin-bottom的下邊界。不然，以該元素中最後一個行框子元素的基線爲該元素的基線。

以下圖：第一個inline-block元素沒有行內子元素，它的基線爲margin-bottom的下邊界；第二個有行內元素（內容），基線以x字母正常基線。vertical-align默認以baseline基線對齊，出現下圖效果。

而當兩個inline-block都沒有行內元素時，就會出現另一種結果了，以下圖所示：

vertical-align

line-height行高的定義就是兩基線的間距；vertical-align的默認值就是基線。這二者之間有着密切的關係。

只有一個元素屬於inline或是inline-block，vertical-align纔會起做用。

這裏須要引伸另一個概念：行替換元素。替換元素就是瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容。行替換元素即：瀏覽器顯示的內容，在經過控制檯審查元素時，看不到實際內容的行內元素。好比<img>圖片，呈現出來就是對應src的圖片，可是審查元素下只有<img>標籤，看不到圖片（只有一個url）。

行替換元素在實際中會產生出現一段空白的問題，以下圖所示：

其實這種狀況跟上面兩個inline-block的狀況同樣，本質上，是vertical-align和line-height一塊兒產生的影響，那麼有什麼方法解決呢？

• 方法一： 讓vertical-align失效

前面也說了，vertical-align對塊級元素無感，因此當沒有後面的'zhaodao88.com'文字時，只要讓圖片display設置爲block就能夠了。

img { display: block; }

• 使用其餘vertical-align值（適合後面有跟文字的場景）

只要不是默認值: baseline，其餘都是能夠的:bottom...

• font-size控制line-height（適合後面沒有跟文字的場景，畢竟font-size會影響字體大小）

下面的空隙高度，其實是文字計算後的行高值和字母x下邊緣的距離。所以，只要行高足夠小，實際文字佔據的高度的底部就會在x的上面，下面沒有了高度區域支撐，天然，圖片就會有容器底邊貼合在一塊兒了。而line-height又受到font-size的影響，所以只須要在父元素上將font-size設置爲0就可。

div { font-size: 0; }

垂直居中

若是想要垂直居中，第一反應利用vertical-align: middle來實現。啪啪啪一段代碼來看看效果

div { line-height: 85px; }
img { vertical-align: middle; }

這就是傳說中的居中嗎？上下間距相差太大了吧？！！
毫無疑問，這又是vertical_align和line-height搞的鬼。

由於middle是相對於x字符的中心點來講的，而實際上字符內容區域是並非x的高度（比方說圖上的h就比x高出一截）就是這一截致使了這種狀況。

所以，要想徹底垂直居中，回顧上面消除空白段的方法。

一、可使用設置font-size: 0的方式（適合後面沒有跟文字的場景，畢竟font-size會影響字體大小）來實現真正意義上的垂直居中。

二、若是既要消除圖片跟文字之間的空隙，又要跟文字，那麼文字可使用一個行內標籤包裹：

<style>
div {
    background-color: #cccccc;
    margin: 100px 300px 0;
    line-height: 85px;
    height: 85px;
    font-size: 0;
}
img {
    vertical-align: middle;
}
span {
    vertical-align: middle;
    font-size: 16px;
}
</style>
<div><img src="https://profile.csdnimg.cn/3/3/0/3_wuchen092832">
    <span style="background-color: #ffffff">zhaodao88.com</span>
</div>

三、使用一個空的行內標籤。將空標籤的line-height設爲div的高度。

<style>
    div {
        background-color: #cccccc;
        margin: 100px 300px 0;
        height: 85px;
        font-size: 0;
    }
    img {
        vertical-align: middle;
    }
    span {
        vertical-align: middle;
        font-size: 16px;
    }
    .none {
        line-height: 85px;
    }
</style>
<div><img src="https://profile.csdnimg.cn/3/3/0/3_wuchen092832">
    <span style="background-color: #ffffff">zhaodao88.com</span>
    <span class="none"></span>
</div>

參考

https://www.w3.org/TR/2020/WD...

https://www.zhangxinxu.com/wo...