「line-height」深入理解

2017-11-07 本文已影响66人果汁凉茶丶

是不是感觉line-height会用，但是用起来总是怪怪的？那是因为你对它理解的还不够！

* 什么是 line-height

line-height【行高】顾名思意指一行文字的高度，用来指定行间的距离，具体来说是指两行文字间基线之间的最小距离。关于基线【base-line】，如下图：

* 支持性

所有浏览器都支持line-height，但ie不支持 line-height 的 inherit 值

* 注意点

line-height 不允许设置负值

* 说明

line-height 与 font-size 的计算值之差（在 CSS 中就是两行的“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计算值。即，当子元素节点设置line-heihgt：inherit的时候，继承的是父元素节点的缩放因子。

* javascript语法

object.style.lineHeight = "2"

* 取值

值	描述
normal	默认，设置合理的行间距
number	此数字会与当前字体的尺寸相乘来设置行间距
length	设置固定的行间距
%	基于当前尺寸的百分比行间距
inherit	从父元素继承 line-height 属性的值

* 深入理解 line-height

css中起高度作用的应该就是height以及line-height了吧！如果一个标签没有定义height属性(包括百分比高度)，那么其最终表现的高度一定是由line-height起作用，即使是 IE6 下 11像素左右默认高度bug也是如此。待我慢慢叙来。

先说一个大家都熟知的现象，有一个空的div，<div></div>，如果没有设置至少大于1像素高度height值时，该div的高度就是个0。如果该div里面打入了一个空格或是文字，则此div就会有一个高度。那么您思考过没有，为什么div里面有文字后就会有高度呢？

这是个看上去很简单的问题，是理解line-height非常重要的一个问题。可能有人会跟认为是：文字撑开的！文字占据空间，自然将div撑开。我一开始也是这样理解的，但是事实上，深入理解**inline模型**后，我发现，根本不是文字撑开了div的高度，而是line-height！

那么，line-height 是如何产生高度的呢？

在inline box模型中，有个line boxes，这玩意是看不见的，这个玩意的工作就是包裹每行文字；一行文字一个line boxes，无论是不同的<div>，<p>还是 <span>；还是单行内容过多自动换行，每一行，都有一个 line-boxes 包裹；line-boxes只有一个特性，就是高度。
所以现在明白为什么没有设置height属性的div也有高度了吧？没错，就是由一个个line-boxes堆积起来的。我们看下例子帮助理解：

html代码

<div class="box">
  Hello world!
</div>
<br/>
<div class="box">
</div>

css代码

* { marign:0; padding: 0; background-color: #4e4e4e; }
.box {
  background-color: pink;
  border: solid 1px white;
}

结果展示

可以看到，同样没有设置height，第一个 div 的高度被文字撑开了，第二个div高度为0。这就因为文案 “Hello World!”由一个 line-boxes 包裹，line-boxes的默认高度为字体高度的110%；所以有了以上现象。需要理解的是，line-boxes是根据文案、图片等这些资源生成的一个高度框，自身不产生高度。

既然如此，我们可以得出一个结论: line-height可以规定高度，有些时候，他也可以取代height

* 拓展与使用

单行文本的居中

从上面的经验我们可以知道，对于单行的文本有 line-boxes 这东西。网络上常说，“把line-height设置与height相同的值，便可以实现单行文字的居中“。是没有错，但是其实略有冗余。line-height本身就能规定高度，其实只需要“把line-height设置成所需要的box的高度” 即可。

多行文本的居中对齐

1. 对于高度不固定的多行文本：
使用padding实现效果，只要把上下padding的值设为相同。

2. 对于高度固定的多行文本：
文字可能为单行，也可能为多行，再又或者字体大小不一致，这时我们就可以借助 line-height 实现居中效果。方案如下
注意：文案较多发生自动换行，或者不同屏幕适配时文字显示行数不一致下，将不适用
html代码

<p class="mulit_line">
    <span style="font-size:12px;">这里是高度为150像素的标签内的多行文字，文字大小为12像素。<br/>这里是第二行，用来测试多行的显示效果。</span>
  <i>&nbsp;</i>
</p>

css 代码

* { margin: 0; padding: 0;}
.mulit_line{
  line-height: 150px; 
  padding: 15px;
  margin-left: 50%;     /* 让盒子左右居中  */
  transform: translateX(-50%);
}
.mulit_line span{
  display: -moz-inline-stack; 
  display: inline-block; 
  line-height: 1.4em; 
  vertical-align: middle;
}
.mulit_line i{
  width:0; 
  display: -moz-inline-stack;
  display: inline-block; 
  vertical-align: middle; 
  font-size: 0;
}

效果展示

避免haslayout：巧妙的设置文字的背景颜色

经常我们有这样的需求: 在一个文案中，需要对某些文字加背景显示，或者，我们有一个tag，用作标注信息。情形如下：

Tag 标签

可以这么实现
html代码

<span class="box">NEWS!</span>