web开发笔记之vertical-align

简介

今天我打算对css样式vertical-align的知识点进行一些总结,在我写具体内容之前,我先要说明一下,就是关于vertical-align的已经有很多文章都有所解释,但是我总觉得他们在某些点上解释不够清楚,所以我这次的总结是基于我看过的一些文章和自我的理解写的,因此不具有权威性,甚至有些地方会有些出入,所以只能仅供参考.如果大家有什么好的提议,我希望可以告诉我.

内容

vertical-align样式只对inline级的元素有效,即display为inline,inline-block,inline-table的元素. 所以这个属性对块级元素是无效的.
而在介绍该样式前,我要先向大家介绍两个至关重要的概念.

• linebox

linebox是具有一个与该行最顶的元素的顶部边缘对齐的顶部边缘和一个与该行最底的元素的底部边缘对齐的底部边缘的区域.这句很拗口,下面见图:

linebox.png

其中红色的虚线区域便是linebox包围的区域,linebox的高度取决于内容.许多个inline级元素一同构成一个linebox.
1.其中top对齐方式就是元素的顶部与linebox的顶部对齐(重合).

2.其中middle对齐方式就是元素的顶部和底部的中点与linebox的中点对(重合).

3.其中baseline对齐方式就是元素的顶部与linebox的baseline对齐(重合),但是关于linebox的baseline的位置并有一个固定的取值,它是会变化的,不过我们可以通过写一个没有设置任何对齐方式的内容为x文本来确定linebox的基线,紧贴x的底部的虚线便是linebox的基线.(可见上图)

4.其中bottom对齐方式就是元素的顶部与linebox的底部对齐(重合).

5.其中sub对齐方式就是元素的baseline低于linebox的baseline.一般常用来做下标,例:

sub.png

6.其中super对齐方式就是元素的baseline略高于linebox的baseline.一般常用来做上标,例:

super.png

• baseline.
  上述中提到了linebox的baseline的位置,所以下面便不再重复了,直入主题.
  我来说下inline级元素的baseline的位置,inline级元素的baseline的位置分为两种:
• inline元素

inline.png

在这里你看到三行的文本相邻排布。行高的顶部和底部是由红线表示的，字体的高度是由绿线来表示的，而baseline是由蓝线表示的。在左边，文本具有一个与字体大小相同的行高，绿色和红线在上下都重叠了。在中间，行高（line-height）是字体大小的两倍大。在右边，行高是字体大小（font-size）的一半。
inline元素的外边缘跟自己line-height的顶部和底部边缘对齐，如果line-height小于font-size的话也不会改变。所以，在上面的图中的行的外边界是红线。
inline元素的baseline字符底部所坐的线，就是图中的蓝线。粗略地说，baseline是在font-size中间下面的一个地方，看看W3C规范的 详细定义。

• inline-block元素

inline-block.png

从左到右，你看到的是一个拥有 流内容（一个“c”）的inline-block元素，一个拥有流内容且overflow: hidden;的inline-block元素和一个没有流内容的inline-block元素（但内容区域有一个高度）。margin的边界由红线表示，以及黄色的border，绿色的padding和蓝色的内容区域，蓝线是每个inline-block元素的baseline。
inline-block元素的外边缘是其 margin-box的顶部和底部边缘，即图中的红线。
inline-block的baseline取决于元素是否具有流内容：
在流内容的情况下，inline-block元素的baseline是正常流的最后一个内容元素的baseline（左边的例子）。对于这最后一个元素，它的baseline位置由它自己的规则决定。
在流内容，但具有overflow:hidden的情况下，baseline是margin-box的底边缘（中间的例子），也相当于inline-block元素的底边缘。
如果没有流内容，则跟上一个一样，baseline位于margin-box的底边缘（右边的例子）。

• line box baseline的移动
  这是最难理解的地方了,我到现在还是一知半解的.所以只能引用原文了

这里有一个使用vertical-align常见的盲点：line box baseline的位置会被行内所有元素所影响。让我们假设这种情况，一个元素以使得line box baseline必须移动的方式进行对齐。由于大多数垂直对齐方式（除了顶部和底部）与baseline相关，这会导致该行中的所有其他元素移动。
一些例子：
如果有一个很高的元素占据了整行的高度，事实上它也决定了整行高度，那么vertical-align对它就没有效果，上下都没有空间让它移动，所以line box的baseline为了满足对齐关系必须移动。在下图中，短方块设置了vertical-align: baseline;，左例中高方块的垂直对齐方式是text-bottom，而在右边中是text-top。你可以看到baseline与短方块始终在一起。

1.png

当用vertical-align的其他值来对齐高方块时也有相似的表现。
然而甚至设置vertical-align为bottom（左图）和top（右图）也会使baseline移动。这十分奇怪，因为这应该与baseline并无关系。

2.png

将一行内两个较大的元素垂直对齐会使得baseline移动来同时满足两个的对齐方式，并且也会调整line box的高度（左图）。再添加一个元素，如果没有因为其对齐方式而超越原有line box的边缘，则不影响line box的高度和baseline的位置（中图）。如果它超出了原来line box的边缘，line box的高度和baseline会再次调整，在这种情况下，我们的前两个方块往下挪了（右图）。

3.png

总结

本来是打算用自己的语言来组织vertical-algin的核心难点,但是写的时候有些卡壳了......,(看来我还没理解透彻.)…（⊙＿⊙；）…..所以只能引用原文的内容,还请多多包涵.还有, 我觉得其中的关键就是找到元素的baseline位置,和linebox的baseline位置,只要确定好这两个因素,那么一切的vertical-algin问题便可迎刃而解了.
最后这里献上原文章的链接Vertical-Align: All You Need To Know(译)