想標題名想了半天超尷尬...
說正題腹缩，在我們的vertical-align屬性中竹祷，其默認值為baseline，及將設置該屬性的元素的基線與元素所在的行框(line box)的基線對齊迟杂。W3C上的描述是元素放置在父元素的基線上狭园，醬紫描述是不準確的。
1.不知道基線是啥尘分？
一張圖告訴你猜惋，下面的四條線就像我們在英語本子上的四線格，用來輔助我們規(guī)范的書寫英文培愁。
字母x書寫時著摔，其底端就在基線上。CSS規(guī)范遵循了這一規(guī)則定续。
2.塊級元素內容高度的確定
在我們進行行內元素布局時谍咆，line-height，font-size 和vertical-align三個屬性起到了至關重要的作用私股。
line-height,font-size 幫助我們確定行內框(inline box)的高度摹察。line box的高度是最高的inline box的頂部到最低(這里指顯示位置)的inline box的底部之間的距離。而一個不聲明height的塊級元素的內容高度是由一個一個line box堆起來的倡鲸，對于內容只有一行的供嚎，塊級元素的內容高度即為line box的高度。
3.line box的基線和line box高度
在行內元素布局時峭状，inline box(行內框)的vertical的默認值為baseline克滴，即它的基線要與對應line box的基線對齊。對于所有inline box都是默認基線對齊的情況下宁炫，待所有的inline box都找好對應位置之后偿曙，line box就可以得出高度了。對于有的inline box的vertical-align為bottom或者top時羔巢，找位置時,對齊的基準是高度最大的inline box望忆，為bottom時即該inline box的底端與基準inline box的底端對齊罩阵，top同理。對齊完之后启摄，line box的高度就能計算出稿壁。
4.line box基線位置
前面說了這么多，各位看官一定朝我扔雞蛋了(我閃~~~)歉备。
重頭戲來了傅是，line box的基線位置就是：
字母x的底部
有沒有砍人的沖動......反正當我試驗出來時，我先是笑了10分鐘蕾羊，（哈哈哈喧笔，終于搞出來了，看了無數博客龟再，查css官方英文文檔都沒弄明白呀书闸，居然這么簡單！＠铡浆劲！WTF）。然后就想砍人哀澈，麻痹的在介紹時多加這么一句不行嗎牌借？？８畎础膨报！
好了，我們來好好理解這里的字母x的底部的含義哲虾。
不是說只要是在這個line box里的x的底部都是基線的位置丙躏。這個x必須是不包含在其他標簽里面的，就是匿名inline-box里面的x束凑。舉個栗子
<div>xxofdiv<span>xxofspan</span></div>
如果這個div只有一行晒旅，那么xxofdiv里的x的底部就是這個line box的基線，而不是xxofspan里面的x汪诉。大家可以將span的line-height設大一點废恋，然后span的vertical-align設為bottom或者top，在div里面加個<input >,之后你會發(fā)現input輸入框的中心線是和xxofdiv里x的底部對齊的扒寄，和xxofspan里的x底部就會有偏移鱼鼓。
其實不是input的中心線與xofdiv底部對齊，在輸入框中輸入字母x该编，仔細比較發(fā)現是x的底部和xofdiv的底部在對齊迄本，是不是豁然開朗了。input框默認的是baseline课竣，它自己的基線就是x的底部嘉赎，line box的基線就是xofdiv的底部置媳，兩個就對齊了。
那么問題來了公条，我們line box里面不一定每次都有包含x的匿名inline-box啊拇囊，這怎么找基線呢？其實這里在對齊時靶橱，會假想這里面正好有x字母(匿名的inline box)寥袭，這樣就可以愉快對齊啦~~~ 不信可以比較不加x,和加x時的情況是不是一樣的。
這里說一些關于基線的坑关霸，img圖像標簽引入的圖片的基線就是圖片底部传黄， textarea標簽也是底部，還有更多的坑等踩了才知道(～￣▽￣)～*队寇。 ?
如果我的理解有差錯的話尝江，歡迎各位看官評論哦，一起討論啦
覺得有用的話英上，點下喜歡哦，關注我啤覆，關注我苍日。
研究了兩天啦，終于搞清楚啦窗声，1.30 該睡覺啦相恃，明天還上班〒_〒
/////////////////////////////////////////////////以下是更新///////////////////////////////////////
line box的中線位置(middle)是過x中心的水平線。
感謝：
