想标题名想了半天超尴尬...
说正题，在我们的vertical-align属性中，其默认值为baseline，及将设置该属性的元素的基线与元素所在的行框(line box)的基线对齐。W3C上的描述是元素放置在父元素的基线上，酱紫描述是不准确的。
1.不知道基线是啥？
一张图告诉你，下面的四条线就像我们在英语本子上的四线格，用来辅助我们规范的书写英文。
字母x书写时，其底端就在基线上。CSS规范遵循了这一规则。
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 >,之后你会发现input输入框的中心线是和xxofdiv里x的底部对齐的，和xxofspan里的x底部就会有偏移。
其实不是input的中心线与xofdiv底部对齐，在输入框中输入字母x，仔细比较发现是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中心的水平线。
感谢：
