/* 只是記錄下前端學習過程中的筆記 有錯誤 麻煩各位大佬一定指正啊 別讓我這個渣渣 保留錯誤的想法 跪謝了 ：）
先說好喔 新手看我的筆記大概會被我搞暈 我是按自己思路寫的 網上有很多大佬好的總結 最好別太記憶我寫的噁心巴拉的筆記
祝好運哦 
學習來源：
http://blog.csdn.net/q121516340/article/details/51483439
https://www.slideshare.net/daemao/line-height-2470819
http://www.zhangxinxu.com/
*/
幾條線的概念：
幾個box的概念：
containing box（包含塊）由height決定高度
line box（行框）由它包含的行內框裏最大的那個的line-height決定高度 與font-size無關 （當然前提是要有內容）
inline box（行內框）由元素的line-height決定高度
containing box 包含 line box line box包含inline box
還有個 content area（內容區）就是top line到bottom line之間的距離 行高 = 內容區 + 行距；
line-height幾種屬性值：
line-height：150% 按照聲明該line-height：150%處的font-size值計算
line-height：1.5em 同上 按照聲明該line-height：150%處的font-size值計算
line-height：1.5 按照繼承或重新聲明的font-size值計算
line-height：normal 大約是1~1.2的意思
舉個栗子哈：
<div style="line-height:150%;font-size:16px;">
<div style="font-size:30px;">
/*此時子元素的line-height值？*/
按照上面依次得出：
150% x 16px 1.5em x 16px 1.5 x 30px 1.2 x 30px
line-height的應用：
1. 用line-height代替height，避免ie6/ie7的haslayout
IE6，IE7下，類似inline-block屬性的元素裏如果有block屬性的元素，如果該block haslayout，則該標籤會衝破外部inline-block的顯示而寬度100%顯示，從使按鈕自適應文字大小的效果失效，解決方法就是使用line-height代替height。
上圖中第一個標籤使用height定高，結果寬度直接100%顯示；第二個標籤使用line-height定高，結果很規矩，自適應與內部文字大小。其代碼如下：
css部分：
.out{display:inline-block; background:#a0b3d6; margin-top:20px;}
.in1{display:block; height:20px;}
.in2{display:block; line-height:20px;}
html部分：
<span class="out">
<span class="in1">height:20px;</span>
</span>
<span class="out">
<span class="in2">line-height:20px;</span>
</span>
2. 消除div中嵌套img 底部有留白bug
.box{line-height:0;}
inline元素默認的vertical-align：baseline；即元素基線和基準的基線對齊
從第一張圖看出基線和底部是有一些距離的 所以會有留白 這時候如果將line-height設置的足夠小 基線上移 自然就會消除留白。
3. 單行文本居中
div{line-height：100px;}
好多地方都寫着單行文本垂直居中是將height和line-height設置成一樣的值 但height沒必要設置 僅僅設置行高就可以 文字在一行中本身就是垂直居中顯示的
4. 圖片居中 或是 多行文本居中
我還沒完完全全搞清楚原理 就不ctrl+ c ctrl+v過來瞎扯淡了 網上大佬們都總結的很好很高深 我還得消化消化。
