學(xué)習(xí)過CSS肯定對line-height與vertical-align兩個屬性有印象；line-height用來設(shè)置行高，vertical-align用來設(shè)置文本垂直方向的對齊方式，兩種看似十分簡單，但是其應(yīng)用及原理卻不簡單

line-height

line-height與內(nèi)容

先思考個問題：默認(rèn)的div元素高度為0，為什么添加了文字之后，高度就有了？這個高度是由哪個屬性決定的？如果是span元素，高度又是又誰決定的呢？

image

如上圖所示，結(jié)果應(yīng)該很明確了：影響div元素高度的是line-height屬性，影響span元素高度的是font-size屬性，更準(zhǔn)確的說法應(yīng)該是line-height決定塊狀元素的內(nèi)容區(qū)域高度，而font-size影響行內(nèi)元素的文本區(qū)域高度，這里請記住內(nèi)容區(qū)域與文本區(qū)域不是同一個概念。

line-height與x

我們這里的x就是26個英文字母中的x。由于自身形態(tài)的一些特殊性，這個小小的不起眼的字母在CSS中是一個很重要的概念。
如基線base-line的定義就是：

字母x 的下邊緣（線）就是我們的基線。

vertical-align中的middle指的就是：

關(guān)于基線向上1/2的x高度對齊

而x的高度甚至作為一個尺寸單位，這個單位就是ex，就是指小寫字母x的高度。

veritcal-align

veritcal-align屬性值

張鑫旭在《CSS世界》中一書中，將veritcal-align屬性值分為4類：

• 線類，如baseline（默認(rèn)值）、top、middle、bottom；
• 文本類，如text-top、text-bottom；
• 上標(biāo)下標(biāo)類，如sub、super；
• 數(shù)值百分比類，如20px、2em、20%等。

這種劃分方法是根據(jù)屬性值的類型來劃分的，實(shí)際使用中感覺這樣的劃分方法不夠合理，如線類中的baseline、middle是受到元素font-size影響，而top、bottom卻是受到元素line-height影響；也就是說baseline、middle是子元素文本區(qū)域與父元素文本區(qū)域?qū)R，top、bottom是子元素內(nèi)容區(qū)域與父元素內(nèi)容區(qū)域?qū)R，不同的veritcal-align屬性值，影響其對齊效果的屬性都是不同的。

middle屬性值不受line-height影響

top屬性值會被line-height影響

上圖顯示的是改變子元素line-height（內(nèi)容區(qū)域）對對齊的影響，此外根據(jù)veritcal-align屬性值不同，子元素的內(nèi)容區(qū)域、文本區(qū)域，父元素的內(nèi)容區(qū)域、文本區(qū)域都會對對齊造成影響，設(shè)置百分比或相對尺寸更是會與font-size與line-height兩個屬性產(chǎn)生直接聯(lián)系，可見簡單的vertical-align想要合理使用并不是那么簡單的。

內(nèi)容區(qū)域與文本區(qū)域

理解和正確使用line-height與vertical-align，首先要明確內(nèi)容區(qū)域與文本區(qū)域的概念：

image

在一般情況下，可以認(rèn)為font-size影響span，span內(nèi)容大小即為文本區(qū)域，line-height影響div，div的內(nèi)容大小即為內(nèi)容區(qū)域。這里要注意影響并不是簡單的font-size或line-height數(shù)值就決定區(qū)域的高度。

image

如上圖div元素的實(shí)際高度是43而不是40，這是因?yàn)閐iv中的文本存在一個為ling-height值40px的內(nèi)容區(qū)域，而span也存在一個ling-height值40px的內(nèi)容區(qū)域，這兩個內(nèi)容區(qū)域高度相等，但是vertical-align默認(rèn)值為baseline，所以兩者之間是關(guān)于文本區(qū)域?qū)R的，文本區(qū)域兩者大小是不同的，即baselin所在位置不同，連接兩個高度相同矩形，接口不在同一個位置，自然兩者就無法對齊，父元素要包含這兩個元素，高度也就不可能只有40px。div包含圖片，底部出現(xiàn)空白也是因?yàn)檫@個原因了，圖片的底部就是baseline，div中存在幽靈節(jié)點(diǎn)，兩者基于baseline對齊造成了底部空白。

CSS中許多奇怪的現(xiàn)象都可以從概念的角度合理的去解釋，在初步學(xué)習(xí)CSS的使用之后，進(jìn)一步理解學(xué)習(xí)CSS的概念是非常有必要的。