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

line-height

line-height與內(nèi)容

先思考個(gè)問題：默認(rèn)的div元素高度為0离钝，為什么添加了文字之后，高度就有了褪储？這個(gè)高度是由哪個(gè)屬性決定的卵渴？如果是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ū)域不是同一個(gè)概念揩尸。

line-height與x

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

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

vertical-align中的middle指的就是：

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

而x的高度甚至作為一個(gè)尺寸單位，這個(gè)單位就是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屬性值會(huì)被line-height影響

上圖顯示的是改變子元素line-height（內(nèi)容區(qū)域）對對齊的影響，此外根據(jù)veritcal-align屬性值不同浙宜，子元素的內(nèi)容區(qū)域官辽、文本區(qū)域，父元素的內(nèi)容區(qū)域粟瞬、文本區(qū)域都會(huì)對對齊造成影響同仆，設(shè)置百分比或相對尺寸更是會(huì)與font-size與line-height兩個(gè)屬性產(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中的文本存在一個(gè)為ling-height值40px的內(nèi)容區(qū)域辱志，而span也存在一個(gè)ling-height值40px的內(nèi)容區(qū)域蝠筑，這兩個(gè)內(nèi)容區(qū)域高度相等，但是vertical-align默認(rèn)值為baseline揩懒，所以兩者之間是關(guān)于文本區(qū)域?qū)R的什乙，文本區(qū)域兩者大小是不同的，即baselin所在位置不同已球，連接兩個(gè)高度相同矩形臣镣，接口不在同一個(gè)位置，自然兩者就無法對齊智亮，父元素要包含這兩個(gè)元素忆某，高度也就不可能只有40px。div包含圖片阔蛉，底部出現(xiàn)空白也是因?yàn)檫@個(gè)原因了弃舒，圖片的底部就是baseline，div中存在幽靈節(jié)點(diǎn)状原，兩者基于baseline對齊造成了底部空白聋呢。

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