css学习笔记之line-height

/* 只是记录下前端学习过程中的笔记 有错误 麻烦各位大佬一定指正啊 别让我这个渣渣 保留错误的想法 跪谢了 ：）

 先说好喔  新手看我的笔记大概会被我搞晕 我是按自己思路写的 网上有很多大佬好的总结 最好别太记忆我写的恶心巴拉的笔记 

 祝好运哦 

学习来源：

http://blog.youkuaiyun.com/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过来瞎扯淡了  网上大佬们都总结的很好很高深  我还得消化消化。