css中的baseline

这是css中的一个容易被人忽略的概念，今天在知乎上看到一个问题，这个问题应该是关于baseline，才去补习了一下关于baseline的知识，首先我来还原一下问题：

<div style="position:absolute;left:0;top:0;background:black;color:white;font-size:24px;">
    <span style="background:red;margin:0;">
    <span>sss</span><span style="overflow:hidden;display:inline-block;background:blue;">ssfdfdfdfdfdfdfdfdfds</span>sss
            </span>
        </div>

，为什么会产生这种现象，这种现象怎么解释？
这个问题，我在看后就是一脸懵逼的状态，但是看到貘吃馍香大神在下面利用了baseline，对做出一番解释，于是顺便去查了一下baseline。结果发现自己的只是有很大空缺。

首先我们来介绍一下什么是ifc：内联格式化上下文，ifc的line box（线框）高度由其包含行内元素中最高的实际高度计算而来，也就是说我们的线框高度是由该行行内级元素最高顶边与最低底边的距离。

行内级元素：行内级元素是那些不会为自身内容形成新的块，而让内容分布在多行中的元素，比如我们的将display设置成inline，inline-block等，都可以变为一个行内级元素。
inline-block后的元素，宽高margin设定有效，参与ifc，并且在行内对齐时使用自己的底边作为基线对齐位置。
inline后的元素，宽高margin设定无效，参与ifc，并且在行内对齐时使用它内文字基线作为基线对齐位置。

baseline：行内盒子依靠vertical-align属性来进行垂直面上的对齐，默认值为baseline，也就是与其父元素基线相对齐；但是当我们的vertical-align为bottom或者top的时候，这种情况下，必不会为其定义baseline，这种情况下，使其底边与父元素的baseline对齐。

我们来试着解释一下上面提到的那个问题：
我们的第二个span，首先是display: inline-block，css规范规定，被inline-block的行内盒子，其bseline就是其父元素的最后一个行内盒子的baseline，所以我们只为其添加inline-block，而不添加overflow:hidden;时，我们得到的是下图这样的情况：

这时并没有发生我们上面问题的那种情况，但是当这个被inline-block的行内盒子的overflow属性不是默认的visible时，此时这个行内盒子的baseline就不在是其父级元素的最后一个行内盒子的baseline，而变为了这个行内盒子的底边。也就是说这时与我们父元素的baseline对齐的就是我们被inline-block的行内盒子底边。
所以解决我们这种问题的原因也比较简单，也就是将我们的第二个span添加一个vertical: top;或者vertical: bottom;就可以，使我们的盒子的底边与父元素的baseline对齐。

相信很多人在刚接触前端或者中期时候总会遇到一些问题及瓶颈期，如学了一段时间没有方向感或者坚持不下去一个人学习枯燥乏味有问题也不知道怎么解决，对此我整理了一些资料 喜欢我的文章想与更多资深大牛一起讨论和学习的话 欢迎加入我的学习交流群907694362