114.关于前端的vertical-align详解

以前一直没有注意这个属性,现在愈来愈发现其属性重要性。

对于一种技术的掌握,你会选择踏实的掌握每一个细节?还是只想要模糊地一知半解?最后使用的时候再来通过不断地试错来达成目的?

技术不是枪,允许你通过试错的方式实现,你不会因为时间慢了1s而没命;但是,提升效率和准确性,是非常有必要的。

零、先摘录一些 vertail-align 的固有特性

vertical-align 是用来做什么的?
首先,我们要明白 vertical-align 是用来垂直对齐的。接下来的探讨才有意义。

  • 1、元素 vertical-align 垂直对齐的位置与前后元素都没有关系

    意即是说它不以前后元素的意志为转移;它是一条真理,从出生就在那里。

  • 2、元素 vertical-align 与行高 line-height 没有任何关系。

    这个需要在不断的实践中得知

  • 3、vertical-align 垂直对齐的位置只与 font-size 的大小有关系。


一、先来看一些 vertical-align 导致的怪象抛砖引玉

114.关于前端的vertical-align详解
如上图,都是 inline-block 的元素,为什么会出现高度不齐的问题?明明只是有些元素内写了字而已啊?

解析三部曲:

  • 1、vertical-align 的默认值为 baseline —— 它带来的作用是一行内,所有的行内元素(inline)、行内块元素(inline-block),要根据基线对齐。
  • 2、空白的块状行内元素的基线是元素顶端;其他元素的基线位于文本的底部。
    114.关于前端的vertical-align详解
  • 3、而 vertical-align 的默认值为 baseline。即是根据基线对齐大家都根据基线(但是问题是大家的基线本来就是不相同的)做了对齐。所以造成了这种现象。

其实事情的本质还是大家的基线是不一样的。在座的各位,虽然通过是否是男是女将你们分成了2个团体(也许还会有3个??),但是用人类来形容你们总是没有问题的。

解决方案:
那么,我们就换一种对齐方式。我们设置 vertical-align: top;

把元素的顶端与行中最高的元素的顶端对齐。

114.关于前端的vertical-align详解

所以我们重新定义元素们的 vertical-align 为 top。top呢,是把元素的顶端 与 行中最高的元素的顶端 对齐。

从上面的例子中,我们可以知道 vertical-align 默认的属性是 baseline(基线对齐)。


二、那么让我们看下它有哪几种属性

可以看下 w3c 官网的东西。
114.关于前端的vertical-align详解

下面我们就来造一些示例把。


本文参考

上一篇:Unity脚步之NetworkBehaviour下前进、后退、左右转向的简单移动


下一篇:[leetcode] 987. Vertical Order Traversal of a Binary Tree @ python