2、父元素【line box】的baseline是最后一个inline box 的baseline。
3、inline-block元素的baseline确定规则
规则1：inline-block元素，如果内部有line box，则inline-block元素的baseline就是最后一个作为内容存在的元素[inline box]的baseline，而这个元素的baseline的确定就要根据它自身来定了。
规则2：inline-block元素，如果其内部没有line box或它的overflow属性不是visible，那么baseline将是这个inline-block元素的底margin边界。
3、例子：inline-block例子
上图描述：
上图中从左到右都是line-block元素，红线代表margin-box的边界，蓝线代表baseline；黄色为border，绿色为padding，蓝色为content。
左边元素包含着没有脱离正常流的内容c，中间元素除了没有脱离正常流的内容c外还增加了overflow:hidden，右边元素没有内容，但是内容区有宽高。
分析图中各种情况inline-block元素的baseline：
上图左图，inline-block元素有处于正常流的内容，根据规则1，所以inline-block的baseline就是最后一个作为内容存在的元素的baseline，也就是内容c的baseline，而c的baseline根据自身定，就是图中蓝色。
上图中图，inline-block元素overflow:hidden不为visible，根据规则2，该inline-block元素baseline就是inline-block元素的margin-box的下边界了，即图中蓝线。
上图右图，inline-block元素没有内容，根据规则2，所以其baseline为margin-box的下边界，即蓝线。
4、例子：baseline确定规则例子
举例：
<style type="text/css">
.ctn-block{
display: block;
background-color: #bbb;
line-height: 200px;
font-size: 50px;
}
.ctn-block .child1{
display: inline-block;
width: 100px;
height: 100px;
margin:10px 0;
vertical-align: baseline;
background-color: aliceblue;
}
</style><div class="ctn-block">
<div class="child1"></div>
<span>Gg</span>
</div>
分析：
父元素.ctn-block的base-line是Gg的baseline，
inline-block元素因为没有内部line box，也没有设置overflow:visible，所以其baseline是底margin边界。
四、vertical-align基于baseline的不同取值
1、baseline
将子元素盒子的baseline与父盒子的baseline对齐。
2、middle
将元素盒子的垂直中点与父盒子的baseline加上父盒子的x-height的一半位置对齐
这里元素盒子的垂直中点容易确定，父盒子的baseline也好确定，但是x-height要进行计算得到，这个x-height就是字母x的高度。
