进一步理解：inline-block，vertical-align，line-height

看似三个最常见的概念背后却隐藏了很深的很深“水”
那有多深呢，先来看下面的代码

引出问题

<style>.inline-block {display: inline-block;}.border {border: 1px solid #000000;}.span {width: 100px;height: 100px;}.bak {background: #33CCFF;} .o-hidden {overflow: hidden;}
</style>
<div class="border"><span class="inline-block border"></span>
</div>

<div class="border"><span class="inline-block border span"></span>
</div>

<div class="border"><span class="bak inline-block">x</span><span class="inline-block border span"></span>
</div>

<div>x<span class="inline-block border span">x</span><span class="inline-block border span"></span><span class="inline-block border span o-hidden">xjq</span>
</div>

好，同学们把这四段代码放到编辑器里面然后打开浏览器，如果对于你眼前的画面没有感到疑惑，那么其实你就无需向下看了

On a block container element whose content is composed of inline-level elements, ‘line-height’ specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element’s font and line height properties. We call that imaginary box a “strut.” (The name is inspired by TeX.).

翻译成国语：

在一个由行内元素组成的块级元素中，line-height指定了这个元素中的所有line box的最小高度。这个最小高度包括在baseline上面的最小高度和baseline下面的最小深度，就好像每个line box是由一个0宽度的，有着元素的font和line-height属性的行内框开始的，我们称这个虚拟的盒子为strut

关于baseline和line box的概念请参考张鑫旭大大的文章：
http://www.zhangxinxu.com/wor...

看着很乱是吧，上图来看：

分析原因

图片描述

这是前两段代码的示意图，对比两张图发现span没有宽高的情况下，baseline上下分别有隐形高度；设置宽高之后，下面的strut仍然存在，再来看第三段代码的示意图

图片描述

图中蓝色区域为行内框的高度，红线即字母x的baseline,strut的高度正好是红线到底边框的高度，也就是说默认垂直对齐方式是baseline;扫了一眼MDN关于vertical-align的文档，默认值果然是baseline，印证了这一说法。

看最后一段代码示意图：
图片描述

wtf，这又是几个意思？？baseline怎么又和底边框接上了？？

The baseline of an ‘inline-block’ is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its ‘overflow’ property has a computed value other than ‘visible’, in which case the baseline is the bottom margin edge.

再来翻译成国语：

对于一个 inline-block 元素，如果它内部没有内联元素，或者它的overflow属性不是visible，那么它的baseline就是元素margin的底端。否则，就是它内部最后一个元素的基线。

好了，图中三个框可以很好地理解这段话：

最前面的x是用来确定这个代码中最外层的div的基线。左起第一个矩形内部有文字，属于内联元素，那么第一个inline-block的基线为内部x的基线，第二个inline-block的内部无内联元素，那么它的基线就是margin的底端，第三个inline-block内部有内联元素，但是他的overflow属性为hidden，不是visible，所以它的基线还是margin的底端。