line-height的理解和应用

标签：style   blog   http   使用   strong   ar   2014   div   

|line-height与line boxes高度

撑开行高度的是line-height（line-boxes），而不是字体大小

　　代码：　　

　　效果：

　　注：如果元素内没有内容，则不会撑开高度，因为line-boxes为0，即使指定了line-height也是不行的，只要有内容，行高就生效（下面的多行垂直居中的p的line-height就是这个道理）

|单行文字的垂直居中对齐
"把line-height值设置为height一样大小的值可以实现单行文字的垂直居中",这句话可以换成“把line-height设置为您需要的box的大小可以实现单行文字的垂直居中”，优点　在于去掉height

　　代码：

　　效果：

|多行文字的垂直居中

要实现高度不固定的文字垂直居中使用padding就好了。对于高度固定的div，里面文字单行或多行显示，字体大小有大有小的情况怎么办呢？方法之一就是借助于line-height。

line boxes的高度取决于它的下属职员的最高高度。而这个高度由一个不占据任何空间的空格完成，方法即使设置font-size为0，line- height为所需要的高度。同时，我们为了分隔line boxes，同时要保持在一行上，需要设置display属性为inline-block

　　css代码：

　　.mulit_line{ line-height: 150px; background: #0af; padding-left: 5px; }
　　.mulit_line_span{ display: -moz-inline-stack; display: inline-block; line-height: 1.4em; vertical-align: middle;}
　　.mulit_line_i{ width:0; display: -moz-inline-stack; display: inline-block; vertical-align: middle; font-size: 0;}

　　html代码：

    <p class="mulit_line">
        <span style="font-size:12px;" class="mulit_line_span">这里是高度为150像素的标签内的多行文字，文字大小为12像素。<br />这里是第二行，用来测试多行效果。</span>
　　　　 <i class="mulit_line_i"> </i>
    </p>

　　效果：

　　(<i>的意思是我的行高为150px,我垂直居中，你跟我是同一行的，所有你也得跟我一样垂直居中；）

　　补充有关于让所有标签在各个浏览器下（ff1-3,IE6-8,chrome,opera）都实现类似display:inline-block的写法：

　　display:-moz-inline-stack;display:inline-block;*display:inline;zoom:1;
　　说明：让行内元素（span，a标签等实现类似inline-block的效果），display:-moz-inline-stack;display:inline-block;就足够了。
　　要实现块状元素的inline-block，需要用到display:-moz-inline-stack;display:inline-block;*display:inline;zoom:1;
　　全部，其中display:-moz-inline-stack;display:inline-block;针对firefox，chrome，opera，IE8，而*display:inline;zoom:1;针对IE6和IE7。

|使用行高代替高度避免haslayout

在某些情形下，line-height可以和height互换，因为实现的效果一样。都能撑开一个高度，然而这两个css属性有一个较隐蔽的差异，就是使用height会使标签haslayout，而使用line-height则不会。

IE6，IE7下，类似inline-block属性的元素里如果有block属性的元素，如果该block haslayout，则该标签会冲破外部inline-block的显示而宽度100%显示，从使按钮自适应文字大小的效果失效，解决方法就是使用 line-height代替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>

 　　效果：、

　　前者冲破限制，宽度直接100%，后者自适应内部文字

　　（文章参考张鑫旭博客，自己总结一下，方便日后查阅）

line-height的理解和应用,布布扣,bubuko.com

line-height的理解和应用

标签：style   blog   http   使用   strong   ar   2014   div   

原文地址：http://www.cnblogs.com/raimonfuns/p/3921475.html