說(shuō)在前面:最近在學(xué)習(xí)張?chǎng)涡翊笊竦摹禼ss行高line-height的一些深入理解及應(yīng)用》和《CSS深入理解vertical-align和line-height的基友關(guān)系》這兩篇文章的時(shí)候遇到一些問(wèn)題，困擾了很久，如果有遇到相同問(wèn)題的，希望本文對(duì)你有所幫助，如果有理解錯(cuò)誤，還請(qǐng)指出！更多內(nèi)容還請(qǐng)看，以上兩篇文章，比我講的更詳細(xì)，這里只分享自己的一些理解。

一、問(wèn)題:

? div盒子(其他元素同)在未設(shè)定高度的時(shí)候，高度由內(nèi)容的高度撐開(kāi)。好像這句話沒(méi)什么問(wèn)題，就像下面一樣：

01.png

   * {
         margin: 0;
         padding: 0;
     }
div {
         width: 200px;
         border: 1px solid;
         margin: 50px auto;  
     }
img {
       width: 100px;
    }

<div>
     <img src="/Pictures/Saved Pictures/路飛.jpg" alt="">
</div>

? 但細(xì)心的你一定發(fā)現(xiàn)，為什么圖片的底部邊緣怎么沒(méi)有和div的底部邊挨在一起，不是說(shuō)div的高度在未設(shè)定的情況下,高度由內(nèi)容的高度撐開(kāi)嘛？

02.png

? 首先這句話沒(méi)有錯(cuò)，但為什么會(huì)有這個(gè)問(wèn)題呢？

? 這里就和vertical-align有關(guān)系了,圖片(行內(nèi)塊元素同)默認(rèn)和文字的對(duì)齊方式baseline，也就是說(shuō)圖片是基于基線對(duì)齊,那基線時(shí)什么呢？這里就又和line-height又有關(guān)了。

? 這里直接用大神的話：

“行高”顧名思意指一行文字的高度。具體來(lái)說(shuō)是指兩行文字間基線之間的距離。基線實(shí)在英文字母中用到的一個(gè)概念，我們剛學(xué)英語(yǔ)的時(shí)使用的那個(gè)英語(yǔ)本子每行有四條線，其中底部第二條線就是基線，是a,c,z,x等字母的底邊線。下圖的紅色線即為基線。

base_line.jpg

? 如果對(duì)于行高有一定理解的你會(huì)問(wèn)，在div盒子里面沒(méi)有文字，怎么會(huì)和文字的基線對(duì)齊呢？這里可以理解為了讓圖片和文字對(duì)齊，在圖片(行內(nèi)塊)前后有個(gè)透明字符存在且寬度為0，不占位置，方便的圖片(行內(nèi)塊)在垂直方向的對(duì)齊，為了方便理解我們可以自己加一個(gè)真實(shí)的字符，情況也是相同的，請(qǐng)看：

03.png

? 所以這里 div的高度 = 內(nèi)容的高度 = 圖片的高度 + 透明字符的高度，但這個(gè)等式不嚴(yán)謹(jǐn)，不是完全相等，還請(qǐng)看下面。

二、多出來(lái)的高度是什么?

? 盒子的高度是怎么來(lái)的呢？

? 答；盒子的高度是由所有行框高度累加起來(lái)的。

04.png

? 注意：文本框內(nèi)的線與線的距離畫的不是很嚴(yán)謹(jǐn)

這里還要解決兩個(gè)問(wèn)題：什么是行內(nèi)框？什么行框？

行內(nèi)框：

1.行內(nèi)元素寬高組成的框或者行內(nèi)塊寬高形成的框；

2.行內(nèi)元素的行內(nèi)框的高度等于line-height

3.行內(nèi)塊的行內(nèi)框的高度等于圖片的高度 + padding + border

行框：

1.由所有的行內(nèi)框組成的；

2.==行框的高度最高的行內(nèi)框頂部 到 最低行內(nèi)框的底部之間的距離==

那么我們現(xiàn)在就可以很清楚的知道，下面多出來(lái)高度的部分其實(shí)是 基線 到 文本行框距離。

05.png

三、怎么解決這個(gè)問(wèn)題?

? 知道多出來(lái)的部分高度是什么就很好解決了。

? 在還是圖片(行內(nèi)塊)默認(rèn)vertical-align：baseline情況下，我們可以讓文本行內(nèi)框的行高足夠小，至少要使行高小于等于中線到基線的距離(文本默認(rèn)在文本行內(nèi)框中垂直居中)，這樣文本行內(nèi)框的底部與基線重合或者在基線之上。在文本的基線和它的行內(nèi)文本框底部重合的時(shí)候，最低的行內(nèi)框是 圖片文本框(和文本的基線對(duì)齊) 和 文本行內(nèi)框；文本的行內(nèi)框的底部在基線之上時(shí)，最低的就是圖片文本框了。這兩種情況下外面div的高度就和圖片的高度相等了。

寫成代碼的話可以：

1.直接控制line-height的值，line-height=0 ;

06.png

* {
            margin: 0;
            padding: 0;
        }
        div {
            width: 200px;
            border: 1px solid;
            margin: 50px auto;
            line-height: 0;
            
        }
        img {
            width: 100px;
        }

<div>
        <img src="Pictures/Saved Pictures/路飛.jpg" alt="">
        <span>x</span>
    </div>

2.間接控制line-height行高等于0，可以讓font-size = 0 。

07.png

 * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 200px;
            border: 1px solid;
            margin: 50px auto;
            /* line-height: 0; */
            font-size: 0;
            
        }
        img {
            width: 100px;
        }

<div>
        <img src="Pictures/Saved Pictures/路飛.jpg" alt="">       
        <span>x</span>
    </div>

四、其他方法

? 在理解多余出來(lái)的高度是怎么來(lái)的之后，我們還可以用其他方法來(lái)去掉這個(gè)多余的高度，使圖片（行內(nèi)塊）不基于baseline對(duì)齊就好了，比如top、middle、bottom等等，或者解決改變圖片的(行內(nèi)塊)的顯示模式為block。

五 、待續(xù)

? 迷迷糊糊，說(shuō)了自己的一些理解，有的問(wèn)題還沒(méi)講到，只能待有空了再補(bǔ)上??

?