是不是感覺(jué)line-height會(huì)用，但是用起來(lái)總是怪怪的？那是因?yàn)槟銓?duì)它理解的還不夠！

* 什么是 line-height

??line-height【行高】顧名思意指一行文字的高度，用來(lái)指定行間的距離，具體來(lái)說(shuō)是指兩行文字間基線之間的最小距離。關(guān)于基線【base-line】，如下圖：

* 支持性

所有瀏覽器都支持line-height，但ie不支持 line-height 的 inherit 值
?

* 注意點(diǎn)

line-height 不允許設(shè)置負(fù)值
?

* 說(shuō)明

??line-height 與 font-size 的計(jì)算值之差（在 CSS 中就是兩行的“行間距”）分為兩半，分別加到一個(gè)文本行內(nèi)容的頂部和底部?？梢园@些內(nèi)容的最小框就是行框。
??原始數(shù)字值指定了一個(gè)縮放因子，后代元素會(huì)繼承這個(gè)縮放因子而不是計(jì)算值。即，當(dāng)子元素節(jié)點(diǎn)設(shè)置line-heihgt：inherit的時(shí)候，繼承的是父元素節(jié)點(diǎn)的縮放因子。
?

* javascript語(yǔ)法

object.style.lineHeight = "2"

?

* 取值

?

* 深入理解 line-height

?css中起高度作用的應(yīng)該就是height以及line-height了吧！如果一個(gè)標(biāo)簽沒(méi)有定義height屬性(包括百分比高度)，那么其最終表現(xiàn)的高度一定是由line-height起作用，即使是 IE6 下 11像素左右默認(rèn)高度bug也是如此。待我慢慢敘來(lái)。

?先說(shuō)一個(gè)大家都熟知的現(xiàn)象，有一個(gè)空的div，<div></div>，如果沒(méi)有設(shè)置至少大于1像素高度height值時(shí)，該div的高度就是個(gè)0。如果該div里面打入了一個(gè)空格或是文字，則此div就會(huì)有一個(gè)高度。那么您思考過(guò)沒(méi)有，為什么div里面有文字后就會(huì)有高度呢？

?這是個(gè)看上去很簡(jiǎn)單的問(wèn)題，是理解line-height非常重要的一個(gè)問(wèn)題?？赡苡腥藭?huì)跟認(rèn)為是：文字撐開(kāi)的！文字占據(jù)空間，自然將div撐開(kāi)。我一開(kāi)始也是這樣理解的，但是事實(shí)上，深入理解**inline模型**后，我發(fā)現(xiàn)，根本不是文字撐開(kāi)了div的高度，而是line-height！

?那么，line-height 是如何產(chǎn)生高度的呢？

?在inline box模型中，有個(gè)line boxes，這玩意是看不見(jiàn)的，這個(gè)玩意的工作就是包裹每行文字；一行文字一個(gè)line boxes，無(wú)論是不同的<div>，<p>還是 <span>；還是單行內(nèi)容過(guò)多自動(dòng)換行，每一行，都有一個(gè) line-boxes 包裹；line-boxes只有一個(gè)特性，就是高度。
? 所以現(xiàn)在明白為什么沒(méi)有設(shè)置height屬性的div也有高度了吧？沒(méi)錯(cuò)，就是由一個(gè)個(gè)line-boxes堆積起來(lái)的。我們看下例子幫助理解：

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;
}

結(jié)果展示

?可以看到，同樣沒(méi)有設(shè)置height，第一個(gè) div 的高度被文字撐開(kāi)了，第二個(gè)div高度為0。這就因?yàn)槲陌?“Hello World!”由一個(gè) line-boxes 包裹，line-boxes的默認(rèn)高度為字體高度的110%；所以有了以上現(xiàn)象。需要理解的是，line-boxes是根據(jù)文案、圖片等這些資源生成的一個(gè)高度框，自身不產(chǎn)生高度。

既然如此，我們可以得出一個(gè)結(jié)論: line-height可以規(guī)定高度，有些時(shí)候，他也可以取代height

?

* 拓展與使用

單行文本的居中

?從上面的經(jīng)驗(yàn)我們可以知道，對(duì)于單行的文本有 line-boxes 這東西。網(wǎng)絡(luò)上常說(shuō)，“把line-height設(shè)置與height相同的值，便可以實(shí)現(xiàn)單行文字的居中“。是沒(méi)有錯(cuò)，但是其實(shí)略有冗余。line-height本身就能規(guī)定高度，其實(shí)只需要“把line-height設(shè)置成所需要的box的高度” 即可。

多行文本的居中對(duì)齊

1. 對(duì)于高度不固定的多行文本：
使用padding實(shí)現(xiàn)效果，只要把上下padding的值設(shè)為相同。

2. 對(duì)于高度固定的多行文本：
文字可能為單行，也可能為多行，再又或者字體大小不一致，這時(shí)我們就可以借助 line-height 實(shí)現(xiàn)居中效果。方案如下
注意：文案較多發(fā)生自動(dòng)換行，或者不同屏幕適配時(shí)文字顯示行數(shù)不一致下，將不適用
html代碼

<p class="mulit_line">
    <span style="font-size:12px;">這里是高度為150像素的標(biāo)簽內(nèi)的多行文字，文字大小為12像素。<br/>這里是第二行，用來(lái)測(cè)試多行的顯示效果。</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：巧妙的設(shè)置文字的背景顏色

?經(jīng)常我們有這樣的需求: 在一個(gè)文案中，需要對(duì)某些文字加背景顯示，或者，我們有一個(gè)tag，用作標(biāo)注信息。情形如下：

Tag 標(biāo)簽

可以這么實(shí)現(xiàn)
html代碼

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

css代碼

.box {
  line-height: 20px;
  background-color: pink;
  padding: 5px;
  color: white;
  border-radius: 6px;
}

說(shuō)明： 在某些情形下，line-height可以和height互換，因?yàn)閷?shí)現(xiàn)的效果一樣。都能撐開(kāi)一個(gè)高度，然而這兩個(gè)css屬性有一個(gè)較隱蔽的差異，就是使用height會(huì)使標(biāo)簽haslayout，而使用line-height則不會(huì)。

沖破限制

關(guān)于line-height先說(shuō)這些，如果有錯(cuò)誤，歡迎指正。
如果覺(jué)得還不夠深入，可以查看 騰訊團(tuán)隊(duì)的 深入理解line-height