行高和行距
line-height 是用于定于行高的css屬性。什么是行高饲握？
從上圖可以清楚看到站故，一行文本對應(yīng)會(huì)有四條線，由上而下分別是 頂線（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芬首，這個(gè)值大概等于數(shù)值上的1-1.2赴捞，因元素的font-family不同而不同。 - 取值
<number>時(shí)郁稍，應(yīng)為純數(shù)字赦政，不帶單位，最終line-height的值等于元素的字體大小值乘以該數(shù)值耀怜，即font-size * number恢着。 - 取值
length時(shí)，應(yīng)該是一個(gè)帶單位的長度值封寞，比如說em然评，px，rem等等狈究。 - 取值
<percentage>時(shí)，是一個(gè)百分比數(shù)值盏求，最終line-height的值等于元素的字體大小值乘以該數(shù)值抖锥，即font-size * number。
要注意<number>和<percentage>之間的區(qū)別碎罚，它們兩個(gè)計(jì)算自身的line-height方式和結(jié)果都是完全一樣的磅废，但區(qū)別就在于繼承方式上，對子元素影響方式不一樣荆烈。
- 使用
<percentage>元素得出的line-height值會(huì)轉(zhuǎn)換成length形式的px值拯勉，然后再把這個(gè)值繼承給它的子元素竟趾。
舉例說，父元素設(shè)置了font-size: 20px; line-height: 150%;宫峦，父元素自身的行高就是20px * 150%岔帽，即30px。那么子元素得到的line-height屬性的繼承值就是30px导绷，而非150%犀勒。（有點(diǎn)em的意思） - 使用
<number>元素會(huì)先把<number>繼承給它的子元素，再由子元素自己去計(jì)算line-height值妥曲。
舉例說贾费，父元素設(shè)置了font-size: 20px; line-height: 150%;，那么子元素line-height屬性的繼承值就是1.5檐盟，子元素的行高由子元素本身的font-size * 1.5得出褂萧。
因此，在實(shí)際場景中使用line-height屬性使用<number>類型的值是較好的做法葵萎，因?yàn)槟悴恢?code><percentage>的繼承方式會(huì)不會(huì)導(dǎo)致一些不可預(yù)料的錯(cuò)誤箱玷，譬如
子元素字體比父元素更大時(shí)，使用<percentage>繼承得到的行高就顯得有些不夠用了陌宿，相對而言<number>實(shí)用性更強(qiáng)锡足！
line-height 的實(shí)際應(yīng)用和效果
首先，要認(rèn)識(shí)inline content（行內(nèi)內(nèi)容）壳坪、inline box（行內(nèi)框）和line box（行內(nèi)框）舶得，這三個(gè)概念和line-height緊密關(guān)閉！（第一個(gè)概念是我自己編的）
由上圖可見：
- 藍(lán)色框是指
div的高度爽蝴，也是inline box（行內(nèi)框）和line box（行內(nèi)框）沐批，由于inline box和line box是不可見的，所以描述對應(yīng)的圖不太準(zhǔn)確蝎亚，自己領(lǐng)會(huì)吧九孩！ - 灰色底的區(qū)域就是
inline content（行內(nèi)內(nèi)容）
那么inline box（行內(nèi)框）和line box（行內(nèi)框）有什么不一樣呢？可以說发框，line box（行內(nèi)框）是由一個(gè)或多個(gè)inline box（行內(nèi)框）形成的躺彬，line box（行內(nèi)框）的高度由其中高度最大的inline box（行內(nèi)框）決定。繼續(xù)上個(gè)例子梅惯，對a標(biāo)簽設(shè)置line-height: 100px;宪拥，可以得到：
（行內(nèi)元素之間還是對齊的，因?yàn)?code>vertical-align的關(guān)系铣减，遲點(diǎn)再學(xué)習(xí)它）
下面說說line-height和height之間的關(guān)系她君。
平時(shí)我們輸入一對空內(nèi)容的<div></div>標(biāo)簽時(shí)，瀏覽器渲染出來div的高度為0葫哗，那么當(dāng)我們輸入文字的時(shí)候缔刹，div就有了高度球涛，這個(gè)高度是因?yàn)槲淖执笮纹饋淼膯幔看鸢福翰皇切８洌怯?code>line box撐起來的亿扁。看下面?zhèn)€例子：
<style>
</style>
<div>
我是div里的內(nèi)容
</div>
<style>
div{ line-hright: 1px; }
</style>
<div>
我是div里的內(nèi)容
</div>
可以看到灭翔，高度確實(shí)是由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>
這里有要注意的一點(diǎn)呐赡，就是當(dāng)span的display: inline-block;去掉后，居中效果就沒有了骏融，為啥呢链嘀？答案就在于line box的數(shù)量，畢竟一行一個(gè)line box嘛档玻，領(lǐng)會(huì)怀泊！
上面這個(gè)技巧，可以用于圖片在容器內(nèi)的垂直居中嗎误趴？答案是霹琼，NO！
開頭在介紹使用元素的時(shí)候凉当，寫了“幾乎全部”枣申，那么就有一些元素對line-height是不感冒的！在這里列出來規(guī)則：
- 對于塊級元素看杭，CSS屬性line-height指定了元素內(nèi)部
inline box的最小高度 - 對于非替代行內(nèi)元素忠藤，line-height用于計(jì)算自身包含的匿名
inline box的高度。 - 對于替代行內(nèi)元素楼雹，如
img或其他object元素模孩，line-height沒有作用。
什么是替代元素和非替代元素烘豹？
- 非替代元素即內(nèi)容即顯示的元素瓜贾，如
div、p等等大部分元素携悯，里面的內(nèi)容會(huì)立即顯示。 - 替代元素會(huì)根據(jù)元素標(biāo)簽筷笨，屬性等決定顯示內(nèi)容憔鬼，如
img龟劲，你得有src屬性，下載圖片才能顯示出來轴或。
規(guī)則是在 MDN - line-height 上摘過來的昌跌，但是經(jīng)過實(shí)驗(yàn)發(fā)現(xiàn)，不是所有的替代行內(nèi)元素都對
line-height不感冒照雁。
要注意的是蚕愤，上面 MDN 的規(guī)則中關(guān)于替代元素的描述仍然是正確的！（也許你看完后面的應(yīng)該再回過頭來想想）
首先說說input饺蚊。input的替代性在于它的type標(biāo)簽萍诱，type不一樣，效果和功能就完全不一樣污呼，下面是所有的input type：
input type : text | button | submit | radio | checkbox | file | hidden | image | password | reset ;
列舉其中2個(gè)試驗(yàn)場景：
試驗(yàn)1：
<style>
*{margin: 0; padding: 0;}
body{ line-height: 50px; }
input{ line-height: 30px; }
</style>
<input type="text" value="i am input">
試驗(yàn)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會(huì)有一個(gè)相對的最小line box高度（其實(shí)是繼承）苗缩。但是饵蒂，對行內(nèi)元素input設(shè)置行高就不一定有效了，關(guān)鍵在于是否擁有（匿名）行內(nèi)子元素酱讶。input:text和input:password（其實(shí)file也有退盯，不過很奇葩）都能輸入文本，里面的文本內(nèi)容可以看做是input的匿名行內(nèi)子元素浴麻，它也可以撐開一個(gè)inline box得问。同理，textarea也一樣软免，只不過textarea可換行宫纬，擁有多個(gè)inline boxes。
總而言之膏萧，就是要看容器內(nèi)有沒有匿名行內(nèi)元素啦漓骚！
