数码资讯
CSS属性行高行高度用法详解
选购提示
关注价格、性能、续航、售后和真实使用场景，理性比较后再下单。
本文介绍了线高度属性在下一个CSS中的用法，通过一个实例学习了CSS行高属性的具体用法，并参考了感兴趣的朋友。
有机会看到一篇文章的在线高度，这是非常详细和透彻，学习。
行距是多少
在古代，我们用打印机出来，每一个印刷的字都是分开的。
行间距，即传说中控制的两条线的东向垂直距离。在CSS，行高是用来控制行与行之间的垂直距离。
但是，行间距和半行间距取决于CSS中的行高，那么，如何使用行高呢
默认状态下，浏览器使用1.0-1.2线的高度，这是一个初始值，您可以定义行高属性覆盖的初始值：P {线高度：140% }
你可以有5种方法来定义线的高度。
1.line-height可以定义为：体{线高度：正常；}
2.line-height可以定义为：体{线高度：继承；}
3.line-height可以使用价值体{线高度的百分比：120%；}
4.line-height可以被定义为一个长度值（px，EM，等）体{线高度：25px；}
5.line-height也可以定义为一个纯粹的数字，体{线高度：1.2 }
简称线高度
字体的属性可以缩写为5种行高，其行高与字体大小紧随其后，如：
例如：身体{字体：100% /正常Arial；}，体{字体：100% / 120%宋体；}，体{字体：100% / 1.2宋体；}，体{字体：100% / 25px宋体；}
计算线高度
一些CSS属性继承（继承），通过元素的堆砌，这是开发商不再升值为后人方便。
线高的继承有点复杂。
单行内容居中：最常用的是同时使用线的高度和高度。
。{身高：25px；线高度：25px }
多行内容：
内容：25px } {线高度
或
内容{行高度：180% }
线路高度详细说明
行高是指文本行之间的距离，但文本之间的空白距离不仅取决于行的高度，而且受数字的影响。
线高度的语法
行高度属性的特定定义列表如下所示：
语法：线高度：正常| | | |继承
说明：在元素中设置行的高度。
值正常：默认行高，通常为1到1.2；实数：实数值，缩放因子，长度：合法长度值可以是负数；百分比：基于元素字体大小的百分比。
初始值：正常值
继承：继承
应用于：所有元素
媒体：视觉
计算值：长度和百分比的值是绝对值，另一个值与指定值相同。
行高指的是文本的行线之间的距离。基线（基线），是指沿基准线电流的字线和基线下端没有汉字，但较低的英文字母X，和顶线的文本（上线），中间（中线）和底线（底线），是用来确定文字的位置的线，如图7-17所示。
图7-17基线
区别行高和字体大小被称为线的距离（龙头），如图7-18所示。
图7-18线高度和行距
7.3.2内容区域，线框、排箱
在理论上，在一条线上的每个元素都有一个内容区域，这是由字体的大小决定，如图7-19所示。
图7-19内容区域
内部元件产生一个内联盒子，内框架只是一个概念，它不能显示，但它确实存在。如果没有其他因素的影响，对内是平等的内容区域，并设置行高可以增加或在框架的高度降低，即：间距值（大字体大小）除以2，分别增加双方的内容区域，如图所示。
图7-20帧内和行的高度
由于行高度可应用于任何元素，同一行中的若干元素可能具有不同的行高和内部行高度。例如，下面的代码显示出来，如图7-21所示。
行高20px。行高的行高30px 50px的。
图7-21线框排架
这是一个新概念，mdash；mdash；线盒（箱）内框架节点是相似的。一排架是一种虚拟的矩形线，与高度等于线中所有元素的最高线。因此，当有多行内容，每一行都有自己的线，如图7-22所示。
图7-22线框多行内容
提示：理解线框和行内框架的概念对于学习{ 7.4垂直对齐部分的内容是很重要的：垂直对齐属性。
注意：框架的高度只与线中的元素的高度有关，而不是与父元素的高度（高度）有关。
7.3.3线高计算和继承
行的单位是EM、EX和百分比，基础是元素本身的字体大小：
这个词是高20px，和线高2em。字高30px，和线高2em。
这2段线的高度是2em，但字体大小是不同的，所以它显示如图7-23所示。
图7-23线高计算
该行的高度可小于字体高度，和文本的多线将叠加在一起，例如，下面的代码，这是显示如图7-24所示。
P {字体大小：20px；线高度：10px；}
这个词是高20px，和线高10px。文本的多线将叠加在一起的这段时间。
图7-24大于字体高度
行高是遗传的，但遗传是计算值，例如，下面的代码：
P {字体大小：20px；线高度：2em；}
P跨{字体大小：30px；}
字高字高30px 20px。
元素的行高2em，字体的大小20px，所以计算40px，虽然元素本身的字体大小30px，但其传承的高度仍40px。但结果是在各种不同的浏览器，如图7-25所示。
对图7-25高度的不同表现
由于计算了继承值，当元素的字体大小不同时，如果设置了固定行高度，则可能导致字体重叠。例如，下面的代码显示出来，如图7-26所示。
P {字体大小：20px；线高度：1em；}
P跨{字体大小：30px；}
这个词是高20px，和线高1em。当文本行，有可能是一个词的重叠现象。这个词是高30px。
图7-26线高遗传原因文字叠加
为了避免这种情况，我们可以分别为每个元素定义行高度，但这是非常麻烦的。因此，我们可以定义一个没有单位的实际值作为缩放因子，以均匀地控制行的高度，而缩放因子是直接继承的，而不是继承的计算值：
{线高度：1；}
这是XHTML代码显示如图7-27所示。
图7-27的影响比例因子对线的高度
当内容包含图片，如果图片的高度大于行高，含图片行将提升到画面的高排架，如图7所示。
图7株含有图片
注意：虽然图片支持线框，但它不会影响线条的高度，所以它不会影响线条高度的其他属性。
注意：当包含图片的行时，图片和文本的垂直对齐在默认基线的垂直对齐上，在第7.4章垂直对齐中：在章节中讨论垂直对齐属性。
7.3.4浏览器中的差异与错误
浏览器在显示时通常有自己的窗体。例如，在歌剧中，行高将分为2个部分基于CSS和分为两部分：内容区域的上下两侧，而IE和Firefox的不完全分割，如图7-29所示。
图7-29显示行高由不同的浏览器
然而，实际显示中1到2像素的差异一般不会有太大的影响，因此可以忽略。更严重的错误是IE 6在图片或表格单元中替换行元素的失败率很高。然而，在IE 7中，已经纠正了这个错误，但其性能不同于其他浏览器，例如，有下面的代码，这是显示如图7-30所示。
# lineheight4 p {线高度：60px；}
# lineheight4 fieldset {边界：0；}
内容包含{ IE 6 }中的图片浏览行高度将无效。表单元素
图7-30包含在伊江的替代元素的行的高度
从图7-30，读者可以发现在IE 7中，半年线间距加上图片的下部，与文本的基线下移，这显然是不与CSS规则线。
对于IE 6中的高故障，有必要使用CSS破解方法来修复IE 6的替换元素的上下白化。
提示：对于IE 6的CSS破解，请参见本书{第第十六章：浏览器和黑客}。
7.3.5应用：单线在垂直方向
在网页设计中，背景图案经常被添加到突出的标题，如图7号至31日显示。
图7号至31日包含背景图片的标题
假定该标题的XHTML代码如下所示：
热点帖子
在这一点上，如果背景图片和文本高，文本就上去了，如图所示7-32。
图7-32不设置高行标题
对于这种现象，一般只需要设置与行的高度相等的高度，相关代码如下所示：
#样品H2 {身高：31px；线高度：31px；}
这时在浏览器的文本已在垂直位置显示，如图7-33所示。
图7-33设置标题行的高度后
该方法也可用于文本垂直显示的其他地方，如列表项、导航栏等。
在最后一节中，我们将解释直线高度和单行文本的垂直对齐。如果我们在线图片、文字和浏览浏览器，读者可以发现，文字和图片都不是中心沿中间线但沿基线在垂直方向上，如图所示7~34。
图7~34默认垂直对齐文本和图片内容对齐基线
这是因为元素的默认垂直对齐是基线对齐（垂直对齐：基线）。
有机会看到一篇文章的在线高度，这是非常详细和透彻，学习。
行距是多少
在古代，我们用打印机出来，每一个印刷的字都是分开的。
行间距，即传说中控制的两条线的东向垂直距离。在CSS，行高是用来控制行与行之间的垂直距离。
但是，行间距和半行间距取决于CSS中的行高，那么，如何使用行高呢
默认状态下，浏览器使用1.0-1.2线的高度，这是一个初始值，您可以定义行高属性覆盖的初始值：P {线高度：140% }
你可以有5种方法来定义线的高度。
1.line-height可以定义为：体{线高度：正常；}
2.line-height可以定义为：体{线高度：继承；}
3.line-height可以使用价值体{线高度的百分比：120%；}
4.line-height可以被定义为一个长度值（px，EM，等）体{线高度：25px；}
5.line-height也可以定义为一个纯粹的数字，体{线高度：1.2 }
简称线高度
字体的属性可以缩写为5种行高，其行高与字体大小紧随其后，如：
例如：身体{字体：100% /正常Arial；}，体{字体：100% / 120%宋体；}，体{字体：100% / 1.2宋体；}，体{字体：100% / 25px宋体；}
计算线高度
一些CSS属性继承（继承），通过元素的堆砌，这是开发商不再升值为后人方便。
线高的继承有点复杂。
单行内容居中：最常用的是同时使用线的高度和高度。
。{身高：25px；线高度：25px }
多行内容：
内容：25px } {线高度
或
内容{行高度：180% }
线路高度详细说明
行高是指文本行之间的距离，但文本之间的空白距离不仅取决于行的高度，而且受数字的影响。
线高度的语法
行高度属性的特定定义列表如下所示：
语法：线高度：正常| | | |继承
说明：在元素中设置行的高度。
值正常：默认行高，通常为1到1.2；实数：实数值，缩放因子，长度：合法长度值可以是负数；百分比：基于元素字体大小的百分比。
初始值：正常值
继承：继承
应用于：所有元素
媒体：视觉
计算值：长度和百分比的值是绝对值，另一个值与指定值相同。
行高指的是文本的行线之间的距离。基线（基线），是指沿基准线电流的字线和基线下端没有汉字，但较低的英文字母X，和顶线的文本（上线），中间（中线）和底线（底线），是用来确定文字的位置的线，如图7-17所示。
图7-17基线
区别行高和字体大小被称为线的距离（龙头），如图7-18所示。
图7-18线高度和行距
7.3.2内容区域，线框、排箱
在理论上，在一条线上的每个元素都有一个内容区域，这是由字体的大小决定，如图7-19所示。
图7-19内容区域
内部元件产生一个内联盒子，内框架只是一个概念，它不能显示，但它确实存在。如果没有其他因素的影响，对内是平等的内容区域，并设置行高可以增加或在框架的高度降低，即：间距值（大字体大小）除以2，分别增加双方的内容区域，如图所示。
图7-20帧内和行的高度
由于行高度可应用于任何元素，同一行中的若干元素可能具有不同的行高和内部行高度。例如，下面的代码显示出来，如图7-21所示。
行高20px。行高的行高30px 50px的。
图7-21线框排架
这是一个新概念，mdash；mdash；线盒（箱）内框架节点是相似的。一排架是一种虚拟的矩形线，与高度等于线中所有元素的最高线。因此，当有多行内容，每一行都有自己的线，如图7-22所示。
图7-22线框多行内容
提示：理解线框和行内框架的概念对于学习{ 7.4垂直对齐部分的内容是很重要的：垂直对齐属性。
注意：框架的高度只与线中的元素的高度有关，而不是与父元素的高度（高度）有关。
7.3.3线高计算和继承
行的单位是EM、EX和百分比，基础是元素本身的字体大小：
这个词是高20px，和线高2em。字高30px，和线高2em。
这2段线的高度是2em，但字体大小是不同的，所以它显示如图7-23所示。
图7-23线高计算
该行的高度可小于字体高度，和文本的多线将叠加在一起，例如，下面的代码，这是显示如图7-24所示。
P {字体大小：20px；线高度：10px；}
这个词是高20px，和线高10px。文本的多线将叠加在一起的这段时间。
图7-24大于字体高度
行高是遗传的，但遗传是计算值，例如，下面的代码：
P {字体大小：20px；线高度：2em；}
P跨{字体大小：30px；}
字高字高30px 20px。
元素的行高2em，字体的大小20px，所以计算40px，虽然元素本身的字体大小30px，但其传承的高度仍40px。但结果是在各种不同的浏览器，如图7-25所示。
对图7-25高度的不同表现
由于计算了继承值，当元素的字体大小不同时，如果设置了固定行高度，则可能导致字体重叠。例如，下面的代码显示出来，如图7-26所示。
P {字体大小：20px；线高度：1em；}
P跨{字体大小：30px；}
这个词是高20px，和线高1em。当文本行，有可能是一个词的重叠现象。这个词是高30px。
图7-26线高遗传原因文字叠加
为了避免这种情况，我们可以分别为每个元素定义行高度，但这是非常麻烦的。因此，我们可以定义一个没有单位的实际值作为缩放因子，以均匀地控制行的高度，而缩放因子是直接继承的，而不是继承的计算值：
{线高度：1；}
这是XHTML代码显示如图7-27所示。
图7-27的影响比例因子对线的高度
当内容包含图片，如果图片的高度大于行高，含图片行将提升到画面的高排架，如图7所示。
图7株含有图片
注意：虽然图片支持线框，但它不会影响线条的高度，所以它不会影响线条高度的其他属性。
注意：当包含图片的行时，图片和文本的垂直对齐在默认基线的垂直对齐上，在第7.4章垂直对齐中：在章节中讨论垂直对齐属性。
7.3.4浏览器中的差异与错误
浏览器在显示时通常有自己的窗体。例如，在歌剧中，行高将分为2个部分基于CSS和分为两部分：内容区域的上下两侧，而IE和Firefox的不完全分割，如图7-29所示。
图7-29显示行高由不同的浏览器
然而，实际显示中1到2像素的差异一般不会有太大的影响，因此可以忽略。更严重的错误是IE 6在图片或表格单元中替换行元素的失败率很高。然而，在IE 7中，已经纠正了这个错误，但其性能不同于其他浏览器，例如，有下面的代码，这是显示如图7-30所示。
# lineheight4 p {线高度：60px；}
# lineheight4 fieldset {边界：0；}
内容包含{ IE 6 }中的图片浏览行高度将无效。表单元素
图7-30包含在伊江的替代元素的行的高度
从图7-30，读者可以发现在IE 7中，半年线间距加上图片的下部，与文本的基线下移，这显然是不与CSS规则线。
对于IE 6中的高故障，有必要使用CSS破解方法来修复IE 6的替换元素的上下白化。
提示：对于IE 6的CSS破解，请参见本书{第第十六章：浏览器和黑客}。
7.3.5应用：单线在垂直方向
在网页设计中，背景图案经常被添加到突出的标题，如图7号至31日显示。
图7号至31日包含背景图片的标题
假定该标题的XHTML代码如下所示：
热点帖子
在这一点上，如果背景图片和文本高，文本就上去了，如图所示7-32。
图7-32不设置高行标题
对于这种现象，一般只需要设置与行的高度相等的高度，相关代码如下所示：
#样品H2 {身高：31px；线高度：31px；}
这时在浏览器的文本已在垂直位置显示，如图7-33所示。
图7-33设置标题行的高度后
该方法也可用于文本垂直显示的其他地方，如列表项、导航栏等。
在最后一节中，我们将解释直线高度和单行文本的垂直对齐。如果我们在线图片、文字和浏览浏览器，读者可以发现，文字和图片都不是中心沿中间线但沿基线在垂直方向上，如图所示7~34。
图7~34默认垂直对齐文本和图片内容对齐基线
这是因为元素的默认垂直对齐是基线对齐（垂直对齐：基线）。
声明：本文内容用于数码产品信息整理与选购参考，具体价格、库存、售后政策以官方渠道和电商页面实时信息为准。