我對(duì)line-height及vertical-align的一點(diǎn)理解

Harriet666 發(fā)布于2019-08-01 18:27 / 1751人閱讀

摘要：張?chǎng)涡窭蠋熢谖恼挛覍?duì)的一些理解與認(rèn)識(shí)一中提到屬性的表現(xiàn)與否，僅僅與其父標(biāo)簽有關(guān)，至于我們通?？吹降呐c后面的文字垂直居中顯示那都是假象經(jīng)過(guò)摸索測(cè)試，才對(duì)這句話有種豁然開(kāi)朗的感覺(jué)。匿名元素我是一段卡哇伊的文字。

張?chǎng)涡窭蠋熢谖恼隆段覍?duì)CSS vertical-align的一些理解與認(rèn)識(shí)（一）》中提到：

vertical-align:middle屬性的表現(xiàn)與否，僅僅與其父標(biāo)簽有關(guān)，至于我們通?？吹降呐c后面的文字垂直居中顯示那都是假象！

經(jīng)過(guò)摸索測(cè)試，才對(duì)這句話有種豁然開(kāi)朗的感覺(jué)。

html：

        
            
            匿名元素
             我是一段卡哇伊的文字。

css：

    .box {
        margin: 36px 0;
        border: 1px dashed blue;
        font-size: 12px;
        color: white;
        background: red;
        /*height: 50px;*/  
    }

    .box .dot {
        display: inline-block;
        width: 16px;
        height: 16px;
        /*line-height:50px;*/
        background: white;
        vertical-align: baseline; // 這個(gè)baseline到底在哪里
    }

    .box .text {
        vertical-align: middle;
        /*line-height:50px; */
        font-size: 16px;
    }

首先要明白的是，一個(gè)行內(nèi)元素有四條看不見(jiàn)的線（直接復(fù)制了張老師文章里的圖片）：

這四條線的位置由誰(shuí)決定呢，我認(rèn)為是字體的大小，當(dāng)字體的font-size:0時(shí)，則四線重合。
所以實(shí)際上子元素的vertical-align對(duì)齊是父元素的這幾條線，看下圖，我直接在父元素span里放樂(lè)“匿名元素”幾個(gè)字，你能直觀的發(fā)現(xiàn)，子元素對(duì)齊的就是“匿名元素”的baseline

另外：
1.vertical-align: baseline/middle...是指此元素的baseline/middle line 和父元素的對(duì)齊
2.對(duì)于空的元素，其baseline就是底邊緣，比如.dot元素