css学习笔记之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部分：

height:20px;


line-height:20px;



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