写在前面的话
在学校业余学习了一个月的CSS，人生中第一篇博客就献给CSS了，欢迎大家指正文章中不正确的地方，在此感谢。在尝试开始写博客的时候查了好多资料，原本以为写自己熟悉的知识的博客很容易，没想到中间还是遇到很多的不懂的地方，写博客真是个好习惯，可以帮自己总结知识，找出自己的知识盲区，只不过太花时间了。国庆都出去玩了，然而我宅了好多天。
veritical-align的作用，对象以及范围
- 作用
veritical是垂直的意思，而align是对齐的意思，两个合起来就是在垂直方向进行对齐。 - 对象
veritical-align的对象，就是谁要进行垂直方向上进行对齐，对象主要有inline元素、inline-block元素和普通文本框等。（table-cell元素本文不作考虑） - 范围
veritical-align的范围，就是在哪里进行对齐呢，是在linebox里。
linebox是什么？
- 位置
linebox主要存在于block元素和inline-block元素中。linebox中可以含有普通文本框、inline-block元素、inline元素。
下面是自己画的图（画的丑别介意，哈哈），主要理解linebox的位置以及包含元素。
- 宽度和高度
linebox的宽度取决于内部元素的宽度，最大为父元素的宽度。
如果没有设置line-height，linebox的高度取决于linebox元素一起决定，一般由最高的元素决定linebox的高度。
vertical的默认属性baseline
- baseline是什么？
这是维基百科上的一张图,简单地来说，baseline是小写字母x下面的一条线。
详细的资料可以查看张鑫旭的博客
- linebox里面的元素的基线baseline
① 普通文本框的baseline
下面有代码可以自己运行试一下
<div style="background: #bbbbbb;font-size: 50px;line-height: 150px;">
xxxxxhg<br/>
xxxxxhg
</div>
总结
普通文本框的baseline，为里面文本的基线，基线的位置取决font-size和line-height。
那如果里面没有x这样的英文字母，都是中文字母怎么确认基线的位置呢？
这么简单^_^....加一个字母x进入文本框不就省事了，哈哈。
② inline元素的baseline
<div style=" 200px;height: 200px;margin: 50px auto;background: #bbbbbb;border: 10px solid yellow;">
<span style="display: inline;border: 10px solid bisque;font-size: 32px;background: aliceblue;padding: 20px;margin: 20px;">
child
</span>
</div>
总结
inline元素的baseline，为内容盒content-box里面文本框的基线。
那如果content-box里面有两行文本框呢？
哈哈，没有这样的情况啦，inline元素的文本框只有一行。
③ inline-block元素的baseline
从左到右的三幅图片都是inline-block元素，不同的是，左面包含着没有脱离正常流的内容c，中间的除了没有脱离正常流的内容以外还加了overflow:hidden,右面的没有内容但是内容区还有高度 。红线代表了margin-box的边界。黄色代表的是border，绿色的是padding，蓝色的是content，蓝色的线代表的是baseline。
inline-block元素的外边缘就是margin-box的边缘。inline-block元素的baseline的位置要看该元素有没有处于正常流之内的内容。
(1)在有处于正常流内容的情况下，inline-block元素的baseline就是最后一个作为内容存在的元素的baseline，这个元素的baseline的确定就要根据他自身来确定了。
(2)在overflow属性不为visible的情况下，baseline就是margin-box的下边界了。
(3)在没有内容但是内容区还有高度 的情况下，baseline还是margin-box的下边界。
看得很乱对吧，刚开始我也是这么觉得，最后有代码练习
上面（1）（2）（3）种情况摘自 弗里得木的翻译笔记
我自己再添加一种情况，其baseline也是margin-box，这种元素是内联替换元素，例如img标签，不管img标签的display设置为inline还是inline-block，其baseline都为margin-box，有兴趣的朋友可以去试一下。
总结
（1）有处于正常流的内容，baseline为最后一个linebox的baseline。(linebox的baseline后面有说到）
（2）overflow不为visible，baseline为margin-box的下边界
（3）没有内容，baseline为margin-box的下边界
-
超级大总结
到此，linebox里inline元素、inline-block元素以及普通文本框的baseline的位置我们大概了解了一下，看了这么多无聊的基线，接下来就是急冻人心的时刻了！！！我们要开始使用各元素的baseline进行垂直方向上的对齐。以下对齐实例的vertical-align值都是默认值baseline。
- linebox的baseline
linebox里有怎么多baseline，那到底以谁的baseline为基准呢？
linebox的baseline以各个元素中最下面的baseline为基准，就是说谁的baseline在最下面，就以谁的baseline为基准进行对齐。
下面是实例①
普通文本框 VS inline元素 VS inline-block元素
查看代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div { width: 500px; height: 500px; margin: 50px auto; background: #bbbbbb; } span.inline { background: #FF6600; display: inline; border:10px solid aqua; font-size: 30px; /*vertical-align默认值为baseline;*/ } span.inline-block { background: yellowgreen; width: 100px; height: 300px; display: inline-block; /*vertical-align默认值为baseline;*/ } /* 大家可以先猜一下（inline、inline-block、text）谁的baseline在最下面， 其中inline-block的baseline是第（3）情况---没有内容但有高度 */ </style> </head> <body> <div> <span class="inline">inline</span> <span class="inline-block"></span> text </div> </body> </html>大家可以先猜一下以谁的baseline为基准
下面是实例②
inline-block情况(1) （2）（3）PK
查看代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div { width: 700px; height: 300px; background: #bbbbbb; margin: 50px auto; } span { width: 100px; display: inline-block; background: #f8b9b7; border: 10px solid #FF6600; margin: 30px; /*这里很重要*/ } /* inline-block元素的baseline三种情况 （1）处于正常流，内容框中有内容 （2）有内容且overflow设置为hidden或者auto，只要不是visible （3）无内容 */ </style> </head> <body> <div> <span>我是inline-block情况（1）</span> <span style="overflow: hidden;">我是inline-block情况（2）</span> <span></span><!--这是情况（3）--没有内容 --> </div> </body> </html>
- 结尾
花了一天查资料，一天写博客，虽然有点累，不过过得很充实，在查找资料的时间得到许多朋友博客的帮助，在此感谢 天镶 和 张鑫旭 的博客。欢迎家指正文章中不正确的地方，在此感谢。
下次有时间就写vertical-align中linebox的baseline位置改变的博文，谢谢阅读。