「line-height」深入理解

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

* 什么是 line-height

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

* 支持性

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

* 注意點(diǎn)

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

* 說明

??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語法

object.style.lineHeight = "2"

* 取值

值	描述
normal	默認(rèn)，設(shè)置合理的行間距
number	此數(shù)字會(huì)與當(dāng)前字體的尺寸相乘來設(shè)置行間距
length	設(shè)置固定的行間距
%	基于當(dāng)前尺寸的百分比行間距
inherit	從父元素繼承 line-height 屬性的值

* 深入理解 line-height

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

?先說一個(gè)大家都熟知的現(xiàn)象，有一個(gè)空的div生宛，<div></div>县昂，如果沒有設(shè)置至少大于1像素高度height值時(shí)，該div的高度就是個(gè)0陷舅。如果該div里面打入了一個(gè)空格或是文字倒彰，則此div就會(huì)有一個(gè)高度。那么您思考過沒有蔑赘，為什么div里面有文字后就會(huì)有高度呢狸驳？

?這是個(gè)看上去很簡(jiǎn)單的問題预明，是理解line-height非常重要的一個(gè)問題∽罚可能有人會(huì)跟認(rèn)為是：文字撐開的酥馍！文字占據(jù)空間，自然將div撐開阅酪。我一開始也是這樣理解的旨袒，但是事實(shí)上汁针，深入理解**inline模型**后，我發(fā)現(xiàn)砚尽，根本不是文字撐開了div的高度施无，而是line-height！

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

?在inline box模型中，有個(gè)line boxes敷搪，這玩意是看不見的兴想，這個(gè)玩意的工作就是包裹每行文字；一行文字一個(gè)line boxes赡勘，無論是不同的<div>嫂便，<p>還是 <span>；還是單行內(nèi)容過多自動(dòng)換行闸与，每一行毙替，都有一個(gè) line-boxes 包裹；line-boxes只有一個(gè)特性几迄，就是高度蔚龙。
? 所以現(xiàn)在明白為什么沒有設(shè)置height屬性的div也有高度了吧？沒錯(cuò)映胁，就是由一個(gè)個(gè)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;
}

結(jié)果展示

?可以看到，同樣沒有設(shè)置height解孙，第一個(gè) div 的高度被文字撐開了坑填，第二個(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ò)上常說饰躲，“把line-height設(shè)置與height相同的值牙咏，便可以實(shí)現(xiàn)單行文字的居中“臼隔。是沒有錯(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/>這里是第二行壤蚜，用來測(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>