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

对齐。