关于line-height的一些深入总结

发表于 分类于

前言

平时经常用到inline-block这个属性，有时候却不是很得心应手，走访各个博客，恶补一番，从而引出了line-height这个大神

一、继承性

关于line-height的继承性相信很多人都是了解的，这里简单提一下。

line-height可以有5种定义方式，默认是normal，接下来分别是inherit（继承）、百分比、长度单位（px或者em）、和数值。

1
2
3
4
5
6
7
body{
    font-size: 16px;
    line-height: 120%;
}
h1{
    font-size: 32px;
}

line-height 的百分比（120%）和 body 的文字大小（16px）计算出来的值（16px*120%=19.2px）会被下层元素所继承,那么h1继承 line-height 之后的值便是 19.2px

这并不是我们想要的结果，如果 body 的 line-height 是纯数字 1.5，那么 1.5 则是先继承 1.5 这个值，然后遍历到 h1 标签的时候，该标签的 font-size 会乘以 1.5 这个系数，得到的便是随 font-size 缩放的 line-height 值

二、盒模型

1
2
3
<p>
    the<em>emphasis</em>element is defined as 'inline'.
</p>

这坨代码涉及到4种boxes：containing boxes、inline  boxes、line boxes 和 content area

  • containing box 就是段落 P，包含了其他的 boxes
  • 而段落中，有一系列的 inline boxes，emphasis 元素就是一种 inline box，其他没有特别标签的则称为 匿名 inline boxes，inline-boxes 总是排成一行，默认以基线对齐
  • 在 containing box 里一个又一个的 inline boxex 则组成了 line boxes，它的高度由内部行高值最大的 inline box 决定
  • content area 是围绕文字的一种看不见的 box，高度由其 font-size 决定，当 line-height 小于 font-size，content area 会溢出并撑起高度

三、垂直居中

把 line-height 设置成所需的 box 的大小，便可以实现内部行内元素的垂直居中 参照 DEMO

1.多行文字居中

1
2
3
4
5
6
7
8
9
<p style="line-height: 300px;">
  <span
    style="display: inline-block;
           vertical-align: middle;
           font-size: 16px;
           line-height: 1.5;">
    我是一段文字<br/>我是一段文字<br/>我是一段文字<br/>我是一段文字<br/>我是一段文字
  </span>
</p>

段落的高度撑到 300px，在这里有两种方法：一种是通过 inline-block 由 p 内部的 inline box 撑高，在 IE8 下 inline-block 不管用，得用 inline；第二种便是交给容器的 line-height，容器必须是块级元素，我的理解是：给块级容器的 line-height 其实是给内部的 line box 设置的，这里的设置的 line box 高度和内部的 inline-boxes 高度取其高者

2.inline-block

inline-block 可谓是 line-height 的好基友，以上的多行文字居中则是靠它来实现的

先看看W3C怎么定义它的：

This value causes an element to generate an inline-level block container**.** The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box

大致意思是：

inline-block 后的元素创建了一个行级的块容器，该元素内部（内容）被格式化成一个块元素，同时元素本身则被格式化成一个行内元素

还需要了解的是：IE5.5 便开始支持 inline-block，但那时所支持的与现在所需的效果并不完全一致，IE8 之前的 inline-block 更像是作为 IE 的一个私有属性，其作用应该只是触发 haslayout

以下是我们熟悉的兼容所有浏览器的 inline-block 写法：

1
2
3
display:inline-block; /* 现代浏览器 +IE6、7 inline 元素 */
*display:inline; /* IE6、7 block 元素 */
*zoom:1;

3.vertical-align

值 描述
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
length
% 使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。

注：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。

可选值挺多的，在 w3school 引用了上面这些乱七八糟的属性

关于数值和百分数值说两句，这两个都支持负值，应该是相对于基线偏移，可以用来修正一些垂直的偏移问题，另外%是由当前标签的line-height值决定的

还有一点，vertical-align 的表现只和父级标签的行高有关，可以看作一个个体，与后面 inline 元素是不是存在或者是以何种方式对齐并没有直接关系

结语

以上内容参考了一些前辈的博客，加上自己的看法并加以总结，东西比较疏散，可能有些认识不太精准，欢迎有不同观点的童靴交流

头回写这类文章，花了将近两个晚上，效率很低有木有啊Orz~~