摘要：的应用大部分时候，我们设置，都是为了垂直居中对齐。然后我们给设置，这样我们就可以重置设置的，又因为保持了内联特性，因此我们可以设置以及产生，从而实现近似垂直居中对齐。
前言
行高，顾名思义是一行文字的高度，而从规范上来说则是两行文字基线之间的距离。行高是作用在每一个行框盒子(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;
}
我是一段文本
效果如下：
line-height的属性值normal
数字
长度
百分比
normalnormal为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;
}
这是一段很长很长的文字，这是一段很长很长的文字，这是一段很长很长的文字，这是一段很长很长的文字，这是一段很长很长的文字
效果如下：
前面的文章有说过，每一个行框盒子前面都有一个看不见的，规范称之为“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...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113312.html
摘要：内联盒子的高度由决定，限制包含盒子的高度，两者一致，即把内联盒子安放在包含盒子内，排除其他外界干扰。这时候由内联盒子模型可知，行间距是等分的，中间部分是，达到看似居中的效果。可以得到结论和设置一致，并非是完全垂直，除非为。 张鑫旭的CSS深入理解之line-height学习笔记 line-height的定义 行高：两行文字基线之间的距离 为何是基线：基线是定义所有字线的根本 不同字体...
摘要：按照定义来解释，就是两行文字之间基线之间的距离。了解完基线的定义后，我们接着来聊行高。上面我们说过，行高就是两条基线的之间的距离，如下图所示。 1.写在前面 两个多周的时间没有写文章了，手好痒好痒，趁着公司在装修，从上周末到本周都在家办公，同时公司的项目并不紧急，于是抽着时间梳理了一下CSS中关于行高line-height的理解，今天发布出来，大家准备好了吗？ 2.基本概念 2.1行高...
摘要：按照定义来解释，就是两行文字之间基线之间的距离。了解完基线的定义后，我们接着来聊行高。上面我们说过，行高就是两条基线的之间的距离，如下图所示。 1.写在前面 两个多周的时间没有写文章了，手好痒好痒，趁着公司在装修，从上周末到本周都在家办公，同时公司的项目并不紧急，于是抽着时间梳理了一下CSS中关于行高line-height的理解，今天发布出来，大家准备好了吗？ 2.基本概念 2.1行高...
摘要：但实质上，只要是内联元素，这两个元素都会同时在起作用。而解决方案可以有以下几种元素不使用基线对齐，可以改为对齐元素块状化设置为设置为总结讲解了的各类属性值及其效果起作用的前提是内联元素与都是同时作用在内联元素上的 前言 vertical-align用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。也就是说，对于块级元素，vertical-align...
摘要：上例中，左边盒子的基线为其底边缘，右边盒子的基线为的基线将右边盒子的行高设置为，即这个的高度为，位置处于中间。 vertical-align的值 线类：baseline（默认）, top, bottom, middle 文字类：text-top, text-bottom 上标下标类：sub, super 数值：1px, 1em - 在baseline对齐的基础上上下偏移一定数值 百分...
阅读 580·2021-11-15 11:38
阅读 543·2021-09-26 09:46
阅读 847·2021-09-14 17:57
阅读 1639·2021-09-07 10:24
阅读 1847·2019-08-30 15:55
阅读 1896·2019-08-30 15:43
阅读 553·2019-08-29 15:25
阅读 840·2019-08-29 12:19
