行高和行距
line-height 是用于定于行高的css屬性。什么是行高？
從上圖可以清楚看到，一行文本對應(yīng)會有四條線，由上而下分別是 頂線（top line），中線（middle line），基線（baseline），底線（bottom line）。根據(jù)這些線，可以清晰地認(rèn)知：
- 行高：相鄰兩行基線（baseline）間的垂直距離
- 行距：上一行的底線（bottom line）和下一行的頂線（top line）的垂直距離
line-height 的取值
line-height: normal | <number> | <length> | <percentage> ;
初始值 ： normal
繼承 ： 是
適用元素：幾乎全部，包括偽元素::first-letter和::first-line
-
line-height初始值為normal，這個值大概等于數(shù)值上的1-1.2，因元素的font-family不同而不同。 - 取值
<number>時，應(yīng)為純數(shù)字，不帶單位，最終line-height的值等于元素的字體大小值乘以該數(shù)值，即font-size * number。 - 取值
length時，應(yīng)該是一個帶單位的長度值，比如說em，px，rem等等。 - 取值
<percentage>時，是一個百分比數(shù)值，最終line-height的值等于元素的字體大小值乘以該數(shù)值，即font-size * number。
要注意<number>和<percentage>之間的區(qū)別，它們兩個計算自身的line-height方式和結(jié)果都是完全一樣的，但區(qū)別就在于繼承方式上，對子元素影響方式不一樣。
- 使用
<percentage>元素得出的line-height值會轉(zhuǎn)換成length形式的px值，然后再把這個值繼承給它的子元素。
舉例說，父元素設(shè)置了font-size: 20px; line-height: 150%;，父元素自身的行高就是20px * 150%，即30px。那么子元素得到的line-height屬性的繼承值就是30px，而非150%。（有點em的意思） - 使用
<number>元素會先把<number>繼承給它的子元素，再由子元素自己去計算line-height值。
舉例說，父元素設(shè)置了font-size: 20px; line-height: 150%;，那么子元素line-height屬性的繼承值就是1.5，子元素的行高由子元素本身的font-size * 1.5得出。
因此，在實際場景中使用line-height屬性使用<number>類型的值是較好的做法，因為你不知道<percentage>的繼承方式會不會導(dǎo)致一些不可預(yù)料的錯誤，譬如
子元素字體比父元素更大時，使用<percentage>繼承得到的行高就顯得有些不夠用了，相對而言<number>實用性更強！
line-height 的實際應(yīng)用和效果
首先，要認(rèn)識inline content（行內(nèi)內(nèi)容）、inline box（行內(nèi)框）和line box（行內(nèi)框），這三個概念和line-height緊密關(guān)閉?。ǖ谝粋€概念是我自己編的）
由上圖可見：
- 藍色框是指
div的高度，也是inline box（行內(nèi)框）和line box（行內(nèi)框），由于inline box和line box是不可見的，所以描述對應(yīng)的圖不太準(zhǔn)確，自己領(lǐng)會吧！ - 灰色底的區(qū)域就是
inline content（行內(nèi)內(nèi)容）
那么inline box（行內(nèi)框）和line box（行內(nèi)框）有什么不一樣呢？可以說，line box（行內(nèi)框）是由一個或多個inline box（行內(nèi)框）形成的，line box（行內(nèi)框）的高度由其中高度最大的inline box（行內(nèi)框）決定。繼續(xù)上個例子，對a標(biāo)簽設(shè)置line-height: 100px;，可以得到：
（行內(nèi)元素之間還是對齊的，因為
vertical-align的關(guān)系，遲點再學(xué)習(xí)它）
下面說說line-height和height之間的關(guān)系。
平時我們輸入一對空內(nèi)容的<div></div>標(biāo)簽時，瀏覽器渲染出來div的高度為0，那么當(dāng)我們輸入文字的時候，div就有了高度，這個高度是因為文字大小撐起來的嗎？答案：不是，是由line box撐起來的?？聪旅?zhèn)€例子：
<style>
</style>
<div>
我是div里的內(nèi)容
</div>
<style>
div{ line-hright: 1px; }
</style>
<div>
我是div里的內(nèi)容
</div>
可以看到，高度確實是由line box撐起來的。那么，既然line-height和height之前的關(guān)系如此曖昧，我們是不是可以利用起來？
是的，比如說：多行文本在容器內(nèi)的垂直居中。
<style>
div{ width: 100px; border: 1px solid #ccc; text-align: center; line-height: 100px;}
span{ line-height: 16px; display: inline-block; vertical-align: middle; }
</style>
這里有要注意的一點，就是當(dāng)span的display: inline-block;去掉后，居中效果就沒有了，為啥呢？答案就在于line box的數(shù)量，畢竟一行一個line box嘛，領(lǐng)會！
上面這個技巧，可以用于圖片在容器內(nèi)的垂直居中嗎？答案是，NO！
開頭在介紹使用元素的時候，寫了“幾乎全部”，那么就有一些元素對line-height是不感冒的！在這里列出來規(guī)則：
- 對于塊級元素，CSS屬性line-height指定了元素內(nèi)部
inline box的最小高度 - 對于非替代行內(nèi)元素，line-height用于計算自身包含的匿名
inline box的高度。 - 對于替代行內(nèi)元素，如
img或其他object元素，line-height沒有作用。
什么是替代元素和非替代元素？
- 非替代元素即內(nèi)容即顯示的元素，如
div、p等等大部分元素，里面的內(nèi)容會立即顯示。 - 替代元素會根據(jù)元素標(biāo)簽，屬性等決定顯示內(nèi)容，如
img，你得有src屬性，下載圖片才能顯示出來。
規(guī)則是在 MDN - line-height 上摘過來的，但是經(jīng)過實驗發(fā)現(xiàn)，不是所有的替代行內(nèi)元素都對
line-height不感冒。
要注意的是，上面 MDN 的規(guī)則中關(guān)于替代元素的描述仍然是正確的?。ㄒ苍S你看完后面的應(yīng)該再回過頭來想想）
首先說說input。input的替代性在于它的type標(biāo)簽，type不一樣，效果和功能就完全不一樣，下面是所有的input type：
input type : text | button | submit | radio | checkbox | file | hidden | image | password | reset ;
列舉其中2個試驗場景：
試驗1：
<style>
*{margin: 0; padding: 0;}
body{ line-height: 50px; }
input{ line-height: 30px; }
</style>
<input type="text" value="i am input">
試驗2：
<style>
*{margin: 0; padding: 0;}
body{ line-height: 50px; }
input{ line-height: 30px; }
</style>
<input type="text" value="i am input">
明顯可以看到，input除了hidden類型外，其他都屬于inline-block，也就是行內(nèi)元素，對塊級元素body設(shè)置行高，作為子元素的input會有一個相對的最小line box高度（其實是繼承）。但是，對行內(nèi)元素input設(shè)置行高就不一定有效了，關(guān)鍵在于是否擁有（匿名）行內(nèi)子元素。input:text和input:password（其實file也有，不過很奇葩）都能輸入文本，里面的文本內(nèi)容可以看做是input的匿名行內(nèi)子元素，它也可以撐開一個inline box。同理，textarea也一樣，只不過textarea可換行，擁有多個inline boxes。
總而言之，就是要看容器內(nèi)有沒有匿名行內(nèi)元素啦！
