深刻理解css之line-height

前言

行高，顾名思义是一行文字的高度，而从规范上来讲则是两行文字基线之间的距离。行高是做用在每个行框盒子(line-box)上的，而行框盒子则是由内联盒子组成，所以，行高与内联元素能够说是很是紧密，行高直接决定了内联元素的高度（注意：这里的内联元素不包括替换元素）；对于块级元素和替换元素，行高是没法决定最终高度的，只能决定行框盒子的最小高度。

x、x-height以及ex

字母x在css里面扮演着一个很重要的角色，由于字母x的下边缘就是基线所在的位置。而x-height指的就是字母x的高度，ex是一个尺寸单位，其大小是相对字母x的来计算的，即1ex就表示1个字母x的高度。以下图所示：

咱们在平时的开发中不多用到ex，由于ex是个相对单位。对于相对的东西，咱们老是感受很难控制，但这并不代表ex就一点用处都没有。咱们能够利用ex就是一个x-height的特性来实现图标与文字的垂直居中，这样如论字体大小如何变化，都不会影响垂直居中的效果。代码以下：

.icon-arrow {
    display: inline-block;
    width: 20px;
    height: 1ex;
    background: url(down.png) no-repeat center;
    background-size: contain;
}

<div>
    <span>我是一段文本</span>
    <i class="icon-arrow"></i>
</div>

效果以下：

line-height的属性值

• normal
• 数字
• 长度
• 百分比

normal

normal为line-height的默认值，但并非一个固定的值，而是会受font-family的影响，对于“微软雅黑”，其值为1.32；而对于“宋体”，其值为1.141。因为不一样操做系统，不一样浏览器所使用的字体不同，因此最终line-height的具体值会不同，所以这个属性做用不大。

数字

咱们能够设置line-height: 1.5。其意思是说line-height的最终大小为 1.5* font-size，通常建议使用该值来设置line-height。

长度

长度用的最多的就是px与em，em跟数字同样，都是相对于font-size来计算的。

百分比

百分比也是相对于font-size来计算的。

相信细心的小伙伴已经发现了，数字，em以及百分比都是相对于font-size来计算的，既然这样，为何还要画蛇添足设置另外两个属性呢。缘由就在于它们的继承方式是不同的。对于数字，父元素设置了1.5，则子元素也是会继承1.5。但若是父元素设置的是1.5em，假设父元素font-size是20px，则父元素line-height是30px，同时子元素的line-height也是30px，也就是说子元素继承的是父元素计算后的line-height值。所以，这也是为何上面推荐使用数字而不是em或百分比的缘由了。

行距与半行距

不少开发人员开还原设计图的时候，每每没有考虑到行距的影响，所以开发出来的页面不少时候都与设计图不符合，总会差那么几个像素。那么什么是行距呢，咱们能够想象一下在文字排版的时候，若是行与行之间的间距为0，则文字是会牢牢贴在一块儿的，所以，行距就是用来协助排版的。行距的计算为：line-height - em-box，em-box指的是1em的大小，所以行距能够表示为：line-height - font-size，假设line-height为1.5，font-size为20，则行距为：
1.5*20 - 20 = 10，则最终行距为10，而这个行距会平均做用于文字的上边和下边。但em-box咱们是没法感知这个盒子在哪的，而内容区域咱们则能够理解为咱们选中文字后的背景色所在区域，而当字体是宋体的时候，内容区域和em-box是等高的，所以咱们能够利用此揪出ex-box的藏身之处。以下图所示：

正是由于行距的存在，咱们给元素设置margin值时，要减去相应的半行距值，这样才能比较精确地还原设计图。

line-height的应用

大部分时候，咱们设置line-height，都是为了垂直居中对齐。但这里的居中，只能说是近似居中，从上面的图能够看出：行距是上下均分的，可是内容区域不是，通常来讲，文字都是偏下的。咱们平时设置字体通常都是12-20像素，这么小的像素值，给出line-height值后，因为上下相差不大，所以感受上是垂直居中的。line-height除了能够做为单行文本的居中对齐外，多行文本也是能够的，代码以下：

.box {
    width: 400px;
    line-height: 400px;
    padding: 0 10px;
    border: 1px solid #ccc;

}
.text {
    display: inline-block;
    line-height: 1.3;
    font-size: 14px;
    vertical-align: middle;
}

<p class="box">
    <span class="text">这是一段很长很长的文字，这是一段很长很长的文字，这是一段很长很长的文字，这是一段很长很长的文字，这是一段很长很长的文字</span>
</p>

效果以下：

前面的文章有说过，每个行框盒子前面都有一个看不见的，规范称之为“strut”的东西。咱们给.box设置了line-height为400px，则这个“strut”的line-height也会继承为400px。而后咱们给.text设置inline-block，这样咱们就能够重置.box设置的line-height，又由于ineline-block保持了内联特性，所以咱们能够设置vertical-align以及产生“strut”，从而实现近似垂直居中对齐。

总结

• 介绍了字母x在css中的地位以及ex的应用
• line-height各类不一样的属性值以及数字、em和百分比的不一样之处
• 行距在line-height的做用
• line-height实现单行垂直居中和多行垂直居中

参考：
《css世界》
https://developer.mozilla.org...