說在前面:最近在學習張鑫旭大神的《css行高line-height的一些深入理解及應用》和《CSS深入理解vertical-align和line-height的基友關(guān)系》這兩篇文章的時候遇到一些問題,困擾了很久叶眉,如果有遇到相同問題的蹦肴,希望本文對你有所幫助,如果有理解錯誤浆兰,還請指出雨饺!更多內(nèi)容還請看荐吉,以上兩篇文章,比我講的更詳細剑逃,這里只分享自己的一些理解浙宜。
一、問題:
? div盒子(其他元素同)在未設定高度的時候蛹磺,高度由內(nèi)容的高度撐開粟瞬。好像這句話沒什么問題,就像下面一樣:
* {
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>
? 但細心的你一定發(fā)現(xiàn)萤捆,為什么圖片的底部邊緣怎么沒有和div的底部邊挨在一起裙品,不是說div的高度在未設定的情況下,高度由內(nèi)容的高度撐開嘛俗批?
? 首先這句話沒有錯,但為什么會有這個問題呢市怎?
? 這里就和vertical-align有關(guān)系了,圖片(行內(nèi)塊元素同)默認和文字的對齊方式baseline岁忘,也就是說圖片是基于基線對齊,那基線時什么呢?這里就又和line-height又有關(guān)了区匠。
? 這里直接用大神的話:
“行高”顧名思意指一行文字的高度干像。具體來說是指兩行文字間基線之間的距離〕叟基線實在英文字母中用到的一個概念麻汰,我們剛學英語的時使用的那個英語本子每行有四條線,其中底部第二條線就是基線戚篙,是a,c,z,x等字母的底邊線五鲫。下圖的紅色線即為基線。
? 如果對于行高有一定理解的你會問岔擂,在div盒子里面沒有文字位喂,怎么會和文字的基線對齊呢?這里可以理解為了讓圖片和文字對齊乱灵,在圖片(行內(nèi)塊)前后有個透明字符存在且寬度為0塑崖,不占位置,方便的圖片(行內(nèi)塊)在垂直方向的對齊阔蛉,為了方便理解我們可以自己加一個真實的字符弃舒,情況也是相同的,請看:
? 所以這里 div的高度 = 內(nèi)容的高度 = 圖片的高度 + 透明字符的高度状原,但這個等式不嚴謹,不是完全相等苗踪,還請看下面颠区。
二、多出來的高度是什么?
? 盒子的高度是怎么來的呢通铲?
? 答毕莱;盒子的高度是由所有行框高度累加起來的。
? 注意:文本框內(nèi)的線與線的距離畫的不是很嚴謹
這里還要解決兩個問題:什么是行內(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)在就可以很清楚的知道部服,下面多出來高度的部分其實是 基線 到 文本行框距離。
三拗慨、怎么解決這個問題?
? 知道多出來的部分高度是什么就很好解決了廓八。
? 在還是圖片(行內(nèi)塊)默認vertical-align:baseline情況下奉芦,我們可以讓文本行內(nèi)框的行高足夠小,至少要使行高小于等于中線到基線的距離(文本默認在文本行內(nèi)框中垂直居中)剧蹂,這樣文本行內(nèi)框的底部與基線重合或者在基線之上声功。在文本的基線和它的行內(nèi)文本框底部重合的時候,最低的行內(nèi)框是 圖片文本框(和文本的基線對齊) 和 文本行內(nèi)框宠叼;文本的行內(nèi)框的底部在基線之上時先巴,最低的就是圖片文本框了。這兩種情況下外面div的高度就和圖片的高度相等了冒冬。
寫成代碼的話可以:
1.直接控制line-height的值伸蚯,line-height=0 ;
* {
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 窄驹。
* {
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>
四朝卒、其他方法
? 在理解多余出來的高度是怎么來的之后,我們還可以用其他方法來去掉這個多余的高度乐埠,使圖片(行內(nèi)塊)不基于baseline對齊就好了抗斤,比如top、middle丈咐、bottom等等瑞眼,或者解決改變圖片的(行內(nèi)塊)的顯示模式為block。
五 棵逊、待續(xù)
? 迷迷糊糊伤疙,說了自己的一些理解,有的問題還沒講到辆影,只能待有空了再補上??
?