资讯专栏INFORMATION COLUMN

进一步理解:inline-block,vertical-align,line-height

zhou_you / 2543人阅读

摘要:左起第一个矩形内部有文字,属于内联元素,那么第一个的基线为内部的基线,第二个的内部无内联元素,那么它的基线就是的底端,第三个内部有内联元素,但是他的属性为,不是,所以它的基线还是的底端。

看似三个最常见的概念背后却隐藏了很深的很深“水”
那有多深呢,先来看下面的代码

引出问题

x
x x xjq

好,同学们把这四段代码放到编辑器里面然后打开浏览器,如果对于你眼前的画面没有感到疑惑,那么其实你就无需向下看了

On a block container element whose content is composed of inline-level elements, ‘line-height’ specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element’s font and line height properties. We call that imaginary box a “strut.” (The name is inspired by TeX.).

翻译成国语:

在一个由行内元素组成的块级元素中,line-height指定了这个元素中的所有line box的最小高度。这个最小高度包括在baseline上面的最小高度和baseline下面的最小深度,就好像每个line box是由一个0宽度的,有着元素的font和line-height属性的行内框开始的,我们称这个虚拟的盒子为strut

关于baseline和line box的概念请参考张鑫旭大大的文章:
http://www.zhangxinxu.com/wor...

看着很乱是吧,上图来看:

分析原因

这是前两段代码的示意图,对比两张图发现span没有宽高的情况下,baseline上下分别有隐形高度;设置宽高之后,下面的strut仍然存在,再来看第三段代码的示意图

图中蓝色区域为行内框的高度,红线即字母x的baseline,strut的高度正好是红线到底边框的高度,也就是说默认垂直对齐方式是baseline;扫了一眼MDN关于vertical-align的文档,默认值果然是baseline,印证了这一说法。

看最后一段代码示意图:

wtf,这又是几个意思??baseline怎么又和底边框接上了??

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的底端。否则,就是它内部最后一个元素的基线。

好了,图中三个框可以很好地理解这段话:

最前面的x是用来确定这个代码中最外层的div的基线。左起第一个矩形内部有文字,属于内联元素,那么第一个inline-block的基线为内部x的基线,第二个inline-block的内部无内联元素,那么它的基线就是margin的底端,第三个inline-block内部有内联元素,但是他的overflow属性为hidden,不是visible,所以它的基线还是margin的底端。

解决方案

font-size: 0 或者 line-height: 0

vertical-align !== baseline

方法1和方法2是两个不同的实现思路,方法1是让strut那个东西消失;方法2说起来就有点多了,简单理解就是inline-block垂直方向设置非baseline,从而让strut没有顶到底部,也就不会有空白出现了

感觉自己写的很乱,有耐心看完的同学真是谢谢你们了~~

还是张鑫旭大大写得好写的全
http://www.zhangxinxu.com/wor...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/111619.html

相关文章

  • 一步理解inline-blockvertical-alignline-height

    摘要:左起第一个矩形内部有文字,属于内联元素,那么第一个的基线为内部的基线,第二个的内部无内联元素,那么它的基线就是的底端,第三个内部有内联元素,但是他的属性为,不是,所以它的基线还是的底端。 看似三个最常见的概念背后却隐藏了很深的很深水 那有多深呢,先来看下面的代码 引出问题 .inline-block { display: inline-block; } ...

    Miracle 评论0 收藏0
  • 【学习笔记】CSS深入理解vertical-align

    摘要:上例中,左边盒子的基线为其底边缘,右边盒子的基线为的基线将右边盒子的行高设置为,即这个的高度为,位置处于中间。 vertical-align的值 线类:baseline(默认), top, bottom, middle 文字类:text-top, text-bottom 上标下标类:sub, super 数值:1px, 1em - 在baseline对齐的基础上上下偏移一定数值 百分...

    ermaoL 评论0 收藏0
  • 前端碎语(1)

    摘要:因为基线的不同,这就会导致内联元素在默认使用定位时,会出现同一行元素的错位问题。那么有没有和基线一样的确定准则呢当然有,一个业界公认的标准就是同一行内联元素中,中线穿过的是小写的中点。 暑假前因为种种原因没有把百度IFE的先期课程学完,这个暑假又参加了相关项目开发,边做边学也总结了一些教训。现在打算写一个系列的文章,把这种集中学习中遇到一些令我的困扰一时的点好好再总结一番。而这些因应工...

    susheng 评论0 收藏0
  • 前端碎语(1)

    摘要:因为基线的不同,这就会导致内联元素在默认使用定位时,会出现同一行元素的错位问题。那么有没有和基线一样的确定准则呢当然有,一个业界公认的标准就是同一行内联元素中,中线穿过的是小写的中点。 暑假前因为种种原因没有把百度IFE的先期课程学完,这个暑假又参加了相关项目开发,边做边学也总结了一些教训。现在打算写一个系列的文章,把这种集中学习中遇到一些令我的困扰一时的点好好再总结一番。而这些因应工...

    jsdt 评论0 收藏0
  • 从一个内联元素布局引发对line-height的探讨

    摘要:从一个内联元素布局引发对的探讨一前言这个属性对于各位前端的小伙伴来说并不陌生。对于块级元素,它指定元素行盒的最小高度。对于非替代的元素,它用于计算行盒的高度。如存在属性的六总结以上就是本人对行内布局以及的一些思考总结。 从一个内联元素布局引发对line-height的探讨 一、前言 line-height这个属性对于各位前端的小伙伴来说并不陌生。在之前写页面的时候碰到过一个该属性相关的...

    seal_de 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<