涉及到内联盒模型，应该是css世界中最复杂，最难以理解的模型，本次仅仅探索涉及到内联盒模型的line-box的一些让人难以理解的现象，找到本质原因之后一定会让你足够惊喜。
参考文献（理论基础）：https://www.cnblogs.com/10yearsmanong/p/13084706.html
首先看例子
html
<body>
<div class="z"></div>
<div class="x">
<span class="a">x</span>
<span class="b">哇</span>
<span class="c">移</span>
</div>
<div class="y"></div>
</body>css
.z{
height:100px;
background:yellow;
}
.x{
font-size:0;
line-height:0;
}
.a{
font-size:200px;
}
.b{
display: inline-block;
font-size:20px;
}
.c{
font-size:20px;
}
.y{
height:10px;
background-color: red;
}问题1：line-box是哪个区块？
是红色与黄色之间的白色块，我们可以通过定义证明，vertical-align：top/bottom的定义为与line-box的顶部或底部对齐。于是我们设置.b与.c的vertical-align分别为top和bottom。
我们确实能够看到‘哇’和‘移’在白色块的上边和下边，但为什么是两字的中间对齐line-box的上边缘与下边缘呢？
问题2：为什么是‘哇’字中间对齐上边缘？
首先我们可以看到‘哇’对应的属性是line-height：0；font-size：20；这个line-height为什么是0呢，就要从该属性说起，line-height是可以继承的，当它是数字的时候，子元素继承的也是数字，当它是百分比或者说数值（12px，1em，1rem，等）它会根据当前font-size的大小计算得出一个具体值然后继承下去（比如font-size：20px；line-height：200%，继承下去的是line-heignt：40px；），因此‘哇’的visual-area的顶部对齐了line-box的顶部。
问题3：什么是visual-area？
就是该内联元素的line-height，既然有了visual-area那就引申出content-area。
以Baseline基线为0，content-area=fontSize*（ascender-descender+lineGap）/emSquare
其中ascender,descender,lineGap是一款字体定义的属性。
基于此line-height：normal也可以计算
line-height：normal=（ascender-descender+lineGap）/emSquare。
因此我们知道content-area只会受font-family和font-size影响。当visual-area大于content-area时,会产生leding,1/2的leading分别加到content-area的上方与下方所以content-area总是处于visual-area中间，当visual-area为0时（line-height：0）就能看到‘哇’字的中间处于line-box上边缘。
问题4：line-box是如何产生的？
首先内联盒模型会产生line-box，它的触发条件时块状盒子内部只有内联元素（inline-block也算）。
问题5：为什么白色区块是line-box？
首先我们得了解line-box的意义，它决定了一行内联元素所占据文档流的高度，若超出一行，则会重新生成一行line-box。所以每一行line-box的高度可能是不同的。每一行line-box会生成一个宽度为0，font-size为父元素font-size的幽灵子节点（strut）。
要解决这个问题，首先要知道base-line的位置是由什么决定的。
问题6：base-line的位置由什么决定？
若只有一个元素，base-line的位置由ascender与descender共同决定(小写x底部位置)，若有多个元素，则由最下方的base-line决定
首先‘x’,‘哇’，‘移’的line-height均为0，因此他们的实际高度也为0，于是从黄色块下边缘依次排布，content-area在中间位置，得出base-line为‘x’的x下边缘（在所有base-line的最下方）。
而base-line是所有的内联元素共同决定的。它是怎么得出的呢？看下图。
也许有小伙伴对x的line-height所处位置存疑，请看下图。
2021/03/01更新
我们基于最开始的代码，进行一点变更继续探索，首先变更的地方为
.x{
font-size:1px;
}
问题7：红块为什么会上移？
首先我们将.x元素的font-size设置为1px后，我们在chrome上进行调试，chrome的font-size在1-12px之间时，统一为12px。因此可以有这样一张图。
因为幽灵字节的的font-size从0上升至12px，因此幽灵字节点的line-height位置由在baseline处往上抬了当前字体在12px时所生成的该x的baseline到该x的1/2content-area的距离。因为在目前line-box中还是幽灵子节点的font-size最小，因此还是取幽灵子节点的line-height位置为最下方，并生成line-box。
问题8：transform对内联元素的影响？
transform属性对display：inline的元素无任何作用,对inline-block的元素有样式上的影响，但对他本身占据的文档流的位置和大小无任何影响。
问题9：vertical-align：text-top/text-bottom对齐的是谁。
幽灵子节点的content-area。以下是证明
问题10：vertical-align：text-top/text-bottom与line-height有关吗？
无关，以下是证明
问题11：为何经过上方设置后，line-box变这么大？
- 通过各元素的content-area比较得出最下方的baseline为最大的X（幽灵子节点content-area为0）
- 幽灵子节点加入战场，它的line-height为200px，所处位置为baseline处，但它的visual-area比其他子元素都要大于是由它决定了line-box
问题12：inline-block对line-box有何影响？
inline-block元素的padding，margin，border，height共同组成content-area，inline-block的content-area等于visual-area。