lyhper blog

总结一下baseline

之前一直没有彻底了解baseline,结果在布局一个页面的时候遇到了点儿问题,现在总结下。


w3c对vertical-align的定义

vertical-align


The vertical-align property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.

Description


Values: baseline | sub | super | top | text-top | middle | bottom | text-bottom | [percentage] | [length] | inherit

Initial value: baseline

Applies to: inline-level and 'table-cell' elements

Inherited: No

遇到的问题

<style>
    .div1,.div2{
        background-color: #000;
        display: inline-block;
        width: 100px;
        height: 30px;
        color: #fff;
        line-height: 30px;
    }
</style>
<div class="wrap">
    <div class="div1">我是div1</div>
    <div class="div2">我是div2</div>
</div>

两个inline-block盒子横排,正常情况如下所示:

预期表现

当我对div1设置overflow:hidden之后,情况却变化了:

实际表现

两个盒子在垂直方向不再对齐

造成的原因

vertical-align默认值为baseline,依据w3c的定义:

baseline:
Align the baseline of the box with the baseline of the parent box.

将盒子的基线与父盒子的基线对齐

那么盒子的基线在哪儿呢?w3c同样给出了定义

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

inline-block盒子的基线是它的普通流中最后一行盒子的基线,如果它没有普通流的内容或者overflow属性不是visible,那么它的baseline就是底部margin的边缘。

这也就解释了为什么div1设置overflow:hidden后两个盒子不再对齐,因为vertical-align的默认值是baseline,而设置了overflow:hidden的div1的baseline位于其底部margin的边缘,而div2的baseline位于其文字的底部