CSS 行内布局实践小结

前言

通常情况下，要使元素排列在一行内，通常做法就是使用float，然后再清浮动。
如下：

但是如果要使其垂直居中，则必须手动调整，蓝色或者绿色块的位置，比较繁琐。

或者另外一种方法，使用inline-block或inline（即IFC），刚好在这里碰到了点坑。

相关css

IFC（Inline formatting contexts）内联格式上下文 ╮(￣▽￣)╭
主要影响IFC内布局的css

• font-size
• line-height
• height
• vertical-aligin

line-box

行盒模型，这是一个显示区域，根据块状容器内，每一行的多个内联元素（inline-level element）都会共同生成一个行盒模型。

font-size

常见的属性，用来指定文本类型节点的大小。IFC内的很多属性的值是基于这个的。

line-height & height

行高在w3c中更明确的定义：

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。

在一个由多个内联元素组成的块状容器内，'line-height'为内联元素的行盒模型指定了一个最低高度。
这个最低高度是分别由基线上的最小高度和基线下的最小深度组成。

盗张图的来示意下，从上到下四条线分别是顶线、中线、基线、底线。
那么行高是指上下文本行的基线间的垂直距离，即图中两条红线间垂直距离（实际在数值上，行高也等于其它相同颜色间的距离）。

换种思路来理解下行高。
实际上很多情况下，一个容器中是只有一行的即只有一条基线，行高是如何计算，以确保这个间距呢?
如下：

蓝色是容器的范围，边界线之间是一个line box。文字其中的内联元素。

所以，

当line-height > font-size时

一个为被设定高度的容器被设定一个行高时，内联元内容的上下会增加2个空白内容的高度。而容器的高度也会撑开，使容器的高度与line-height相等。

a1 + b1 +c1 == line-height & a1 == c1

如果容器的高度已经被设定，那么超出容器下边界线的部分则不影响布局。

当line-height < font-size时，

容器未被指定高度时，容器的上下两侧塌陷(类似于margin为负值的情况)，但上述公式仍成立。

a1（负值） + b1 + c1(负值) == line-height & a1 == c1

如下所示:

白色是塌陷的部分(即 a1 和 c1)，红色是line-height，如果把容器设置为 overflow:hidden,
那么就只能看见红色的部分。

如果容器被指定height高度时，

height > line-height，那么黄线会下移，红色部分会展示更多，
height < line-height，那么黄线会上移，红色的部分被遮盖的更多了。

所以在这里的情况是，

决定容器高度的优先级 height > line-height > font-size

vertical-align

垂直对齐线，默认为baselien，来自W3C的定义：

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

该属性影响由多个内联元素生成的盒模型组成的行内盒模型的垂直定位

vertical有几个特定的值，或者指定一个值。

<p class="a1">
  <span style="vertical-align:60px;">
    English中文
  </span>
  <span>
    中文English
  </span>
</p>

给第一个span，设置60px的垂直偏移量，显示如下：

其中，黄色线就是基线（baseline），绿线和黄线的间隔即为60px。
这里会发现，容器（蓝色）的高度被撑高了。

容器的高度 height = line-height + vertical-align

当然同理,如果容器的高度被指定了，那么高度则不变，而超出的部分则不影响布局。如果设置overflow:hidden，超过的部分则不可见。

而vertical-align的其它特殊值，均可以看做一个根据容器高度而变化的相对值。

结论

熟练使用inline-level element和行内布局的属性，以非常快速完成垂直居中和水平居中的效果，并且有良好的可维护性和拓展性。

参考

W3C IFC
W3C line-height和vertical-aligin
line-height详解