vercital-align的自我理解

一切以X为准。使用vercital-laign:middle会使自身中部对齐X的中部。x可以理解为行内文字，所以font-size也会产生影响。

1、两个大小一样的盒子，其中有一个使用vercital-laign:middle。可以看出基线是红盒子的底部（也是x的基线）。双色盒子中部对齐了基线然后向上移动了x的一半。

    <div style="width: 100px;height: 100px;background-color: rgb(0, 0, 0);font-size: 20px;">
        <div style="display: inline-block;width: 40px;height: 40px;background-color: rgb(255, 0, 0);"></div
        ><div
            style="vertical-align: middle;display: inline-block;width: 40px;height: 40px;background-color: rgb(0, 119, 255);">
            <div style="display: block;width: 40px;height: 40px;background-color: rgb(255, 0, 255);height: 20px;">

            </div>
        </div>
        x
    </div>

2、红盒子基线是与x基线对齐的。

    <div style="width: 100px;height: 100px;background-color: rgb(0, 0, 0);font-size: 20px;">
        <div style="display: inline-block;background-color: rgb(255, 0, 0);height: 100%;width: 10px;">

        </div>
        x
    </div>

3、给红盒子添加vercital-align:middle，按照中部对齐基线然后向上移动了x的一半的过程大概是：
因为上面没东西所以顶上去了。
这样的话，基线就在整个盒子的中部减去x的一半高度那里了，这样我们随便加个行内元素都会在这个基线上,而这个元素想垂直居中只要加vercital-align:middle。

4、回到第一个例子，如果我给红盒子里面加个X，红盒子的基线就不是盒子底部了，而是红盒子里x的基线。

    <div style="width: 100px;height: 100px;background-color: rgb(0, 0, 0);font-size: 20px;">
        <div style="font-size: 50px;display: inline-block;width: 40px;height: 40px;background-color: rgb(255, 0, 0);">x</div
        ><div
            style="vertical-align: middle;display: inline-block;width: 40px;height: 40px;background-color: rgb(0, 119, 255);">
            <div style="display: block;width: 40px;height: 40px;background-color: rgb(255, 0, 255);height: 20px;">

            </div>
        </div>
        x
    </div>

按照基线与基线默认对齐的原则，两个x的基线对齐了。但我不知道这个红盒子的x为什么会往下跑。感觉理解还不够。我预想中应该是两个x中取最高的那个作为基线，红x就应该不会动，黑x会去对齐红x基线。
就结果而言，大概元素是以同级x的基线为准。红x比黑x多了父级div。
感觉还是有点模糊。。。