示例圖

Paste_Image.png

關(guān)鍵點(diǎn)

• baseline簡(jiǎn)單來(lái)說(shuō)就是圖中小寫(xiě)字母i、n、x（下文中稱(chēng)之為單行小寫(xiě)字母）等的下邊界
• 倘若一行中文字有大有小，此時(shí)baseline的確立是由一個(gè)行盒中距離底部最高的單行小寫(xiě)字母的下邊界確立的
• 一個(gè)行內(nèi)塊元素或是多行的行內(nèi)元素，其作為一個(gè)整體，baseline是由最后一行的單行小寫(xiě)字母下邊界決定的
• 在baseline確定后middle的確定是在baseline的基礎(chǔ)上加上父盒子字體大小下小寫(xiě)字母x高度的一半，官方說(shuō)明中指出middle是在baseline的基礎(chǔ)上加上1/2的小寫(xiě)字母x的高度，但是這個(gè)小寫(xiě)字母x的大小具體是以什么為基準(zhǔn)的呢，經(jīng)過(guò)測(cè)試，是以父盒子的字體大小為基準(zhǔn)的

實(shí)例代碼

• html:

<div class="box">
    ![](./collection_active.png)
    <span class="big_text">Xx</span>
    <span class="small_text">Xx</span>
    <span class="inline_bolck"><p>Xx</p><p>ixp</p></span>
</div>

• css:

.box {
    background: red;
    font-size: 12px;
}
.big_text {
    font-size: 20px;
}
.inline_bolck {
    display: inline-block;
}
.small_text {
    font-size: 10px;
}
span {
    background: purple;
}
img {
    background: yellow;
}

• 效果：

  
  
  Paste_Image.png

• 作為對(duì)比我們看下只有img的情況：

• html:

<div class="box">
    ![](./collection_active.png)
</div>

• css:

.box {
    background: red;
    font-size: 12px;
}
img {
    background: yellow;
}

• 效果：

  
  
  Paste_Image.png

.box盒子內(nèi)沒(méi)有文本，但是圖片距離下邊距有一點(diǎn)間距，原因就是沒(méi)有顯示地為.box盒子設(shè)置字體大小，其默認(rèn)情況下繼承了父盒子即body的默認(rèn)字體大小14px，然后再根據(jù)14px的大小的單行小寫(xiě)字母下邊界確立了baseline，最后因?yàn)閕mg默認(rèn)是inline-block模型，默認(rèn)對(duì)齊方式是vertial-align:baseline，所以得到了上圖的顯示效果。
這也是我們?cè)谙龍D片下邊間隙是通過(guò)設(shè)置父盒子的font-size:0來(lái)實(shí)現(xiàn)的原因。

由于對(duì)比情況較多，這里不一一列舉代碼以及效果，具體可以通過(guò)調(diào)整示例一的代碼得到不同的情況，主要對(duì)比場(chǎng)景有：

<div class="box">
    ![](./collection_active.png)
    <span class="small_text">Xx</span>
</div>

將box盒子字體設(shè)置成20px，再將span字體設(shè)置成10px，不斷增大span字體大小但不超過(guò)父盒子字體，會(huì)發(fā)現(xiàn)img距離父盒子的下邊距不會(huì)發(fā)生改變，證明此時(shí)baseline是通過(guò)較大的字體20px來(lái)決定的（因?yàn)?0px大的單行小寫(xiě)字母距離底部比10px大的單行小寫(xiě)字母距離底部要高）

middle的確定-實(shí)驗(yàn)事例：

<div class="box">
        <span>x</span>![](./collection_active.png)<span class="inline_bolck"><p>Xx</p><p>xixp</p></span><span class="big_text">Xx</span><span class="small_text">Xx</span>
</div>

.box {
    background: lightblue;
    font-size: 16px;
}
.big_text {
    font-size: 20px;
}
.inline_bolck {
    display: inline-block;
    font-size: 16px;
}
.small_text {
    font-size: 10px;
}
span {
    background: purple;
}
img {
    background: orange;
        vertical-align: middle;
}
p {
    margin: 0;
}

• 效果：

Paste_Image.png

其中最左邊的x的字體大小時(shí)通過(guò)父盒子box設(shè)置的，而右邊紫色文本塊的字體大小都是有直接設(shè)置的，試驗(yàn)中通過(guò)修改父盒子box的字體大小，會(huì)發(fā)現(xiàn)vertial-align：middle的心形塊的中線始終和最左邊x的中點(diǎn)在同一水平線上，而修改右邊文本塊的字體大小，并不影響這一對(duì)齊，由此可見(jiàn)，行框的middle線是在baseline的基礎(chǔ)上加上1/2行框字體大小下小寫(xiě)字母x的高度，而與行框內(nèi)其他子元素的字體大小無(wú)關(guān)