CSS

一招帮你搞定基线位置(line box基线)

想标题名想了半天超尴尬...

说正题,在我们的vertical-align属性中,其默认值为baseline,及将设置该属性的元素的基线与元素所在的行框line box的基线对齐。W3C上的描述是元素放置在父元素的基线上,酱紫描述是不准确的。

1.不知道基线是啥?

一张图告诉你,下面的四条线就像我们在英语本子上的四线格,用来辅助我们规范的书写英文。
基线图
字母x书写时,其底端就在基线上。CSS规范遵循了这一规则。

2.块级元素内容高度的确定

在我们进行行内元素布局时,line-heightfont-sizevertical-align三个属性起到了至关重要的作用。

line-height,font-size 帮助我们确定行内框(inline box)的高度。line box的高度是最高的inline box的顶部到最低(这里指显示位置)的inline box的底部之间的距离。而一个不声明height的块级元素的内容高度是由一个一个line box堆起来的,对于内容只有一行的,块级元素的内容高度即为line box的高度。

3.line box的基线和line box高度

在行内元素布局时,inline box(行内框)的vertical的默认值为baseline,即它的基线要与对应line box的基线对齐。对于所有inline box都是默认基线对齐的情况下,待所有的inline box都找好对应位置之后,line box就可以得出高度了。对于有的inline box的vertical-align为bottom或者top时,找位置时,对齐的基准是高度最大的inline box,为bottom时即该inline box的底端与基准inline box的底端对齐,top同理。对齐完之后,line box的高度就能计算出。

4.line box基线位置

前面说了这么多,各位看官一定朝我扔鸡蛋了(我闪~~~)。

重头戏来了,line box的基线位置就是:
字母x的底部

狗血

有没有砍人的冲动......反正当我试验出来时,我先是笑了10分钟,(哈哈哈,终于搞出来了,看了无数博客,查css官方英文文档都没弄明白呀,居然这么简单!!!WTF)。然后就想砍人,麻痹的在介绍时多加这么一句不行吗??!!

好了,我们来好好理解这里的字母x的底部的含义。

不是说只要是在这个line box里的x的底部都是基线的位置。这个x必须是不包含在其他标签里面的,就是匿名inline-box里面的x。举个栗子

<div>
    xxofdiv
    <span>xxofspan</span>
</div>

如果这个div只有一行,那么xxofdiv里的x的底部就是这个line box的基线,而不是xxofspan里面的x。大家可以将span的line-height设大一点,然后span的vertical-align设为bottom或者top,在div里面加个input,之后你会发现input输入框的中心线是和xxofdiv里x的底部对齐的,和xxofspan里的x底部就会有偏移。

其实不是input的中心线与xofdiv底部对齐,在输入框中输入字母x,仔细比较发现是x的底部和xofdiv的底部在对齐,是不是豁然开朗了。input框默认的是baseline,它自己的基线就是x的底部,line box的基线就是xofdiv的底部,两个就对齐了。

那么问题来了,我们line box里面不一定每次都有包含x的匿名inline-box啊,这怎么找基线呢?其实这里在对齐时,会假想这里面正好有x字母(匿名的inline box),这样就可以愉快对齐啦~~~ 不信可以比较不加x,和加x时的情况是不是一样的。

这里说一些关于基线的坑,img图像标签引入的图片的基线就是图片底部, textarea标签也是底部,还有更多的坑等踩了才知道(~ ̄▽ ̄)~*。

line box的中线位置(middle)是过x中心的水平线。

感谢:

字母’x’在CSS世界中的角色和故事