vertical-align之不深入理解

2017-07-18 本文已影响0人喂虾米的鱼

1. 属性定义

先来看下官方定义：

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

重点：

line box
inline-level element

图1

理解：

如图所示

inline box:
每个灰色的框框都是一个inline-level element，即通常所说的display:inline以及display:inline-block的元素；inline-level element各自有个inline box;
line box:
红色框范围内即是line box;

关于 line box 盒子更详细的可以看看这篇CSS float浮动的深入研究、详解及拓展(一)

2. 取值

取值很多：

baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit

本文重点关注baseline 和 middle；

1. baseline

Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline.

重点：

baseline

理解：

baseline
直接看图。如图所示

图2

定义里提到如果盒子没有baseline，则将盒子的margin底部和linebox的baseline对齐。可以在这将没有baseline 的盒子的margin底部所在线理解为它的baseline方便后续理解。我们来看个例子。

<p class='p1'>
    <span>xixi</span>haha
</p>
<p class='p2'>
    <span></span>haha
</p>
<p class='p3'>
    <span>xixi</span>haha
</p>

span{
        display: inline-block;
        background: #eee;
        height:50px;
        width:40px;}
.p3 span{
       overflow: hidden;}

如图所示中图和右图的基线位置一致。这里提下overflow的value为visible之外的值的情况下inline-block表现的和里面是空的情况一样，baseline是它的margin底部。
另外我试了下几个常见的元素,图片元素 textarea的margin底部就是它的基线。 input[type=text]的基线是其内部文字的基线，不管有没有输入文字。

2. middle

Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.

重点：

midpoint
x-height

理解：

midpoint vertical midpoint就是垂直中点
x-height见图2上的x-height的高度。line box 的baseline 是会随着inline box的 vertical align的值改变而改变的。我得出个不成熟的结论。比如Line box里有a b c 几个inline box; 当linebox 的上边缘是由a 撑起的时候，对b c 更改vertical align并且此时不涉及到改变line box的上边缘的话，无论bc 怎么改，line box的baseline不会发生改变。而改变a的vertical align时 line box的baseline会改变。
这里先拿空元素举个栗子：

           .s1{
                height: 50px;
            }
            .s2{
                height: 60px;
            }
            .s3{
                height: 59px;
            }

当左右两个span的vertical-align 改成 top bottom middle等不涉及到更改Linebox上边缘时候linebox都不会改变。但是当其设置为100%时会更改line box的baseline。（向上移动100%自身高度）。直接改变中间的s2的vertical 也会导致baseline发生变化。
回到middle来。middle按照定义是将元素垂直中心点对齐baseline加上1/2 x-height的高度。1/2 x-height就可以理解成‘x’交叉的那个点的高度咯。

    <p class='p1'><span class="s1"></span><span class="s2"></span>xi</p>
    <p class='p2'><span class="s1"></span><span class='s2'></span>xi</p>

    .s1{
        height: 30px;
    }
    .s2{
        height: 60px;
    }
    p{
        float: left;
        margin-left: 10px;
    }
    .p1 .s1{
        vertical-align: middle;
    }
    .p2 .s2{
        vertical-align: middle;
    }

右图所示 linebox的baseline发生了变化，来使得s2的中心点对齐line box的baseline 加上‘x’的一半高度呢。

3. 常见的间隙

   <div><span></span></div>
   <div><span></span><i>xixi</i></div>

       div{
           background: #eee;
           width: 60px;
           float: left;
           margin-left: 10px;
       }
       span,i{
           display: inline-block;
       }
       span{
           width: 20px;
           height: 60px;
           background: #ddd;
       }
       i{
           background: #ccc;
       }

如图所示外部容器和span之间是有一段小间隙的。i标签占据的高度是由它的line-height决定的。因为基线要对齐，所以下移；那左边没有文字为啥这样呢。因为每行的linebox初始位置都有一个宽度为0的字符，规范上将这个称作strut。

完结撒花嘻嘻(●'◡'●)。

参考资料

深入理解 CSS：字体度量、line-height 和 vertical-align
我对CSS vertical-align的一些理解与认识（一）
Vertical-Align: All You Need To Know