css中line-height的理解_介绍line-height实际应⽤
⼀、line-height的定义
css中line-height⾏⾼是指⽂本⾏基线之间的距离，不同字体，基线位置不同。line-height只影响⾏内元素和其他⾏内内容，⽽不会直接影响块级元素，如果块级元素设置了line-height，这个值只会应⽤到块级元素⾥⾯的内联内容时才会有影响。在块级元素上声明line-height会为该块级元素的内容设置⼀个最⼩⾏框⾼度。
⼆、line-height与⾏内框盒⼦模型
<p>hello world<em>this is em</em></p>
这样⼀⾏普通的代码，包含了4种盒⼦，如下：
1.“内容区域”（content area）
围绕⽂字看不见的盒⼦，内容区域的⾼度⼤⼩只与font-size的⼤⼩和font-family有关，在simsun宋体字体下，内容区域⾼度等于⽂字⼤⼩。
2.“内联盒⼦”（inline boxes）
内联盒⼦（inline boxes），不会让内容成块显⽰，⽽是排成⼀⾏。如果外部含inline⽔平标签，则属于内联盒⼦；如果是个光秃秃的⽂字，则属于”匿名内联盒⼦“。
3.⾏框盒⼦（line boxes）
每⼀⾏就是⼀个⾏框盒⼦，每⼀个⾏框盒⼦⼜是由⼀个个内联盒⼦组成。
4.包含盒⼦（containing box）
由⼀⾏⾏⾏框盒⼦组成。
三、line-height与内联元素的⾼度机理
关于内容区域⾼度：①内容区域⾼度只与字体以及字号有关，与line-height没有任何关系；②在simsun字体下，内容区域⾼度等于⽂字⼤⼩值。
⾏的⾼度不是由于⾏⾼造成的。因为：①⾏⾼由于其继承性，影响⽆处不在，即使单⾏⽂本也不例外；②⾏⾼这是幕后⿊⼿，⾼度表现不是⾏⾼，⽽是内容区域和⾏间距。只不过：⾏间距 = line-height - font-size
⾏间距⼀般是上下均分的。
总结：⾏⾼决定内联盒⼦⾼度；⾏间距墙头草，可⼤可⼩可负值，保证⾼度正好等同于⾏⾼。
四、line-height的不同属性值
line-height:normal/<number>/<lenght>/<percent>/inherit;
normal：默认属性值。与浏览器和元素字体相关。因此为了让各个浏览器兼容性⼀致，要初始化line-height。
<number>：使⽤数值作为⾏⾼值。line-height = number * font-size
<lenght>：使⽤具体长度值作为⾏⾼值。em/rem/px/pt
<percent>：使⽤百分⽐作为⾏⾼值。line-height = percent * font-size
inherit：⾏⾼继承。IE8+
问题：line-height:1.5/150%/1.5em的区别
答：计算⽆差别。1.5所有可继承元素根据font-size重新计算⾏⾼；150%/1.5em当前元素根据font-size计算⾏⾼，继承给下⾯的元素。
body全局数值⾏⾼使⽤经验：
匹配20px使⽤，为了⽅便⼼算：line-height = 20px / 14px = 1.42857由于chrome是19px，所以body{font-size:14px;line-height:1.4286;}
五、line-height实际应⽤
1、图⽚⽔平垂直居中（ie8+）
.box{line-height:300px;text-align:center;}
.box>img{vertical-align:middle}
2、多⾏⽂本⽔平垂直居中(ie8+)css设置文字垂直居中
.box{line-height:250px;text-align:center;}
.box>.text{display:inline-block; line-height: nomal; text-align:left;vertical-align:middle;} 3、⽤line-height代替height，避免ie6/ie7的haslayout
{height:36px;line-height:36px;}
其实可以直接简写成：
{line-height:36px;}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。