想標(biāo)題名想了半天超尷尬...
說(shuō)正題，在我們的vertical-align屬性中，其默認(rèn)值為baseline，及將設(shè)置該屬性的元素的基線與元素所在的行框(line box)的基線對(duì)齊。W3C上的描述是元素放置在父元素的基線上，醬紫描述是不準(zhǔn)確的。
1.不知道基線是啥？
一張圖告訴你，下面的四條線就像我們?cè)谟⒄Z(yǔ)本子上的四線格，用來(lái)輔助我們規(guī)范的書寫英文。
字母x書寫時(shí)，其底端就在基線上。CSS規(guī)范遵循了這一規(guī)則。
2.塊級(jí)元素內(nèi)容高度的確定
在我們進(jìn)行行內(nèi)元素布局時(shí)，line-height，font-size 和vertical-align三個(gè)屬性起到了至關(guān)重要的作用。
line-height,font-size 幫助我們確定行內(nèi)框(inline box)的高度。line box的高度是最高的inline box的頂部到最低(這里指顯示位置)的inline box的底部之間的距離。而一個(gè)不聲明height的塊級(jí)元素的內(nèi)容高度是由一個(gè)一個(gè)line box堆起來(lái)的，對(duì)于內(nèi)容只有一行的，塊級(jí)元素的內(nèi)容高度即為line box的高度。
3.line box的基線和line box高度
在行內(nèi)元素布局時(shí)，inline box(行內(nèi)框)的vertical的默認(rèn)值為baseline，即它的基線要與對(duì)應(yīng)line box的基線對(duì)齊。對(duì)于所有inline box都是默認(rèn)基線對(duì)齊的情況下，待所有的inline box都找好對(duì)應(yīng)位置之后，line box就可以得出高度了。對(duì)于有的inline box的vertical-align為bottom或者top時(shí)，找位置時(shí),對(duì)齊的基準(zhǔn)是高度最大的inline box，為bottom時(shí)即該inline box的底端與基準(zhǔn)inline box的底端對(duì)齊，top同理。對(duì)齊完之后，line box的高度就能計(jì)算出。
4.line box基線位置
前面說(shuō)了這么多，各位看官一定朝我扔雞蛋了(我閃~~~)。
重頭戲來(lái)了，line box的基線位置就是：
字母x的底部
有沒(méi)有砍人的沖動(dòng)......反正當(dāng)我試驗(yàn)出來(lái)時(shí)，我先是笑了10分鐘，（哈哈哈，終于搞出來(lái)了，看了無(wú)數(shù)博客，查css官方英文文檔都沒(méi)弄明白呀，居然這么簡(jiǎn)單！！！WTF）。然后就想砍人，麻痹的在介紹時(shí)多加這么一句不行嗎？？！！
好了，我們來(lái)好好理解這里的字母x的底部的含義。
不是說(shuō)只要是在這個(gè)line box里的x的底部都是基線的位置。這個(gè)x必須是不包含在其他標(biāo)簽里面的，就是匿名inline-box里面的x。舉個(gè)栗子
<div>xxofdiv<span>xxofspan</span></div>
如果這個(gè)div只有一行，那么xxofdiv里的x的底部就是這個(gè)line box的基線，而不是xxofspan里面的x。大家可以將span的line-height設(shè)大一點(diǎn)，然后span的vertical-align設(shè)為bottom或者top，在div里面加個(gè)<input >,之后你會(huì)發(fā)現(xiàn)input輸入框的中心線是和xxofdiv里x的底部對(duì)齊的，和xxofspan里的x底部就會(huì)有偏移。
其實(shí)不是input的中心線與xofdiv底部對(duì)齊，在輸入框中輸入字母x，仔細(xì)比較發(fā)現(xiàn)是x的底部和xofdiv的底部在對(duì)齊，是不是豁然開朗了。input框默認(rèn)的是baseline，它自己的基線就是x的底部，line box的基線就是xofdiv的底部，兩個(gè)就對(duì)齊了。
那么問(wèn)題來(lái)了，我們line box里面不一定每次都有包含x的匿名inline-box啊，這怎么找基線呢？其實(shí)這里在對(duì)齊時(shí)，會(huì)假想這里面正好有x字母(匿名的inline box)，這樣就可以愉快對(duì)齊啦~~~ 不信可以比較不加x,和加x時(shí)的情況是不是一樣的。
這里說(shuō)一些關(guān)于基線的坑，img圖像標(biāo)簽引入的圖片的基線就是圖片底部， textarea標(biāo)簽也是底部，還有更多的坑等踩了才知道(～￣▽￣)～*。 ?
如果我的理解有差錯(cuò)的話，歡迎各位看官評(píng)論哦，一起討論啦
覺(jué)得有用的話，點(diǎn)下喜歡哦，關(guān)注我，關(guān)注我。
研究了兩天啦，終于搞清楚啦，1.30 該睡覺(jué)啦，明天還上班〒_〒
/////////////////////////////////////////////////以下是更新///////////////////////////////////////
line box的中線位置(middle)是過(guò)x中心的水平線。
感謝：
