inline-block之后意外发现块下沉

前几天面试某M公司的前端开发，被虐了一通之后，发现自己的前端学的真是一塌糊涂，总结一下各个问题，发现前端之路漫漫，还需潜心修行。

在网上查找关于浏览器兼容的问题，几乎每一篇都提到了inline-block的问题。自己动手测试了一下，发现了一个意外的现象——当设置块元素display:inline-block之后，如果某些块写了文字，某些不写，写了文字的就会下沉，但如果都不写或者都写了，就不会出现这种情况。

首先写三个块测试

<div id="a1"></div>
<div id="a2"></div>
<div id="a3"></div>

给这三个块加上style

<style type="text/css">
#a1,#a2,#a3{ width:200px; height:50px;}
#a1{ background-color:#F00;}
#a2{ background-color:#0F0;}
#a3{ background-color:#00F;}
</style>

我们看一下效果

块级元素默认就是会换行的。

然后我们给这三个块都加上display:inline-block;

设置inline-block，将三个块显示在同一行上，之后我又很傻的试了一下将三个块设置成inline,结果就是什么都不显示了。好好想了一下，这是肯定的，元素分为inline elements和block-level elements，inline默认的展示方式就是inline,你也可以将它设置为none，它将不显示（不存在），你也可以将它设置成block,它将独占一行。block-level elements的元素默认展示方式就是block，同样，你可以把它设置成none，但你也可以设置成inline，但因为inline的元素没有width和height，所以当你将有宽高的块设置成行内元素的话，它的宽高都失效了，如果块中有文字，它就会显示出来，如果块里什么也没有，它就消失了。所以设置块display:inline真的不是什么明智之举。所以inline-block出来拯救无知的人类了，字面意思，行内块，对，它就是让你既显示在同一行，又不丢失块的属性。

接下来，往其中一块中写点东西，神奇的事情发生了。

写了文字的块下沉了，但是如果三个块都写了，那它又会对齐。我们再多写一些你就会发现规律了

虽然块参差不齐，但是字是对齐的，所有的文字的底端都在同一条线上，每一个框中的文字又是靠容器的顶部对齐的。看了一些资料之后，整理出以下几点：

1.行内元素有一个基线，所有在这一行中的元素都以这条基线为准对齐。基线指的是一排字横排时下沿的基础线。

2.文本在容器中默认是上对齐的，你可以设置容器的text-align为right或者left、center，但是不能设置文字靠容器底部对齐（非要这样也是有办法，例如包一个<p>或者<div>之类的设置与父容器的相对位置等），就是说，文字是老大，它不迁就别人，只有容器靠下来迁就它。所以这个造成了这样参差不齐的显示。

3.补充一点，三个块中，一二个块，当容器放不下文字的时候，文字会自动换行，但是最后一个不会，它会突破容器。这是因为最后一个没有空格，它会以为这是一个单词，采取不截断的措施，汉字和单词，它会给它换行。如果就想要一堆字母换行，可以在块中设置word-break，属性有break-all,keep-all等，这个暂且不说。

4.拯救强迫症的救世主来了，他就是——vertical-align，默认是baseline,设置这个值，top,bottom,middle随便一个，就可以对齐了。

#a1,#a2,#a3{ width:200px; height:50px;display:inline-block; word-break:break-all; vertical-align:top;}

详细用法可以访问http://www.w3school.com.cn/cssref/pr_pos_vertical-align.asp