摘要：当一个元素是使用不带单位的数字，声明的值会被继承，也就是说这个值会在子元素中用来与子元素本身的重新计算子元素的。所以我们通常想要的效果是使用不带单位的我们可以在父元素上设定一个无单位数字其子元素会默认继承。
首先我们来了解一下line-height的单位有哪些：
1.normal
2.inherit
3.number
4.number + px/em/rem/……
5.%
line-height属性最特别的地方在于可以支持带单位的值，也可以支持不带单位的值，那这两种直接有什么区别呢？
我们先看下面的例子：
https://codepen.io/donnyqi/pe...
当line-height为纯数字无单位的时候，子元素的line-height的值会从父元素继承line-height值与自己本身的font-size值计算后成为自己的line-height值：
line-height:2---->2*16=32px
line-height:2---->2*17=34px
line-height:2---->2*18=36px
line-height:3---->3*18=54px
不带单位的行高，会在每个后代元素下重新计算出实际值
当line-height为纯数字带单位的时候，子元素的line-height的值会直接继承父元素的line-height值：
line-height:16px---->16px
line-height:20px---->20px
line-height:24px---->24px
line-heithg:2em ---->2*16=32px
带单位的行高，后代元素会直接继承父元素的line-height计算结果值
知道了无单位数字与有单位数组line-height值的区别之后，我们来看一个现象：有单位数字line-height的情况下子元素有跟父元素不一样font-size大小的情况:
这个现象就说明了有单位数字line-height情况下如果子元素有跟父元素不一样字号大小的情况，就会导致意想不到的结果，例如文字之间的遮挡问题。
总结：
normal同number效果一样，会在每个后代元素下重新计算出实际值，系数约1.2
%同number+px/em/rem单位效果一样，后代元素会直接继承父元素的line-height计算结果值
当一个元素是使用带单位的值声明的，那么它的后代元素会继承其父元素line-height计算结果值:行高属性是用类似px、em、rem等单位来声明时，它的值会先被计算，然后计算后的值会传到任何继承它的后代元素。
当一个元素是使用不带单位的数字，声明的值会被继承，也就是说这个值会在子元素中用来与子元素本身的font-size重新计算子元素的line-height。
所以我们通常想要的效果是使用不带单位的line-height,我们可以在父元素上设定一个无单位数字line-height,其子元素会默认继承。如果想在子元素上有额外的样式，则在子元素上写line-height覆盖即可。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116953.html
摘要：无单位数字和行高有一些属性可以接收不带单位的数值意思就是一个不带长度单位的数字，如和等于，等于，如此类推。警告不带单位的只可以表示长度单位和百分比的值，譬如和。段落继承了的行高。长度有两种类型绝对的和相对的。 前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》，其中的第二章《Working with relative units》，书中对relative ...
摘要：在上一篇文章中我们知道可以通过属性可以实现首行缩进两个字符。现在我们来讲一下第二个技巧。通过设置来实现针对如果里面是标签的情况下实现更好的优化。为了实现更好的我们就可以应用这个技巧。可以实现元素的居中。 text-indent 在上一篇文章中我们知道可以通过text-indent: 2rem属性可以实现首行缩进两个字符。现在我们来讲一下第二个技巧。通过设置text-indent: -9...
摘要：如果用动画来表现，可以看出拉长的时候红色会变得比蓝色长，但压缩的时候却是蓝色变得比红色长，如此一来就更能体会在响应式设计里头的关键角色。 Flexbox是一个CSS3的盒子模型（box model），顾名思义它就是一个灵活的盒子（Flexible Box）。 Flexbox模型概念 第一步要来看Flexbox的盒子模型，根据W3C文章所描述，flex的盒子模型如下图所呈现，与一般的盒子...
摘要：如果用动画来表现，可以看出拉长的时候红色会变得比蓝色长，但压缩的时候却是蓝色变得比红色长，如此一来就更能体会在响应式设计里头的关键角色。 Flexbox是一个CSS3的盒子模型（box model），顾名思义它就是一个灵活的盒子（Flexible Box）。 Flexbox模型概念 第一步要来看Flexbox的盒子模型，根据W3C文章所描述，flex的盒子模型如下图所呈现，与一般的盒子...
摘要：如果用动画来表现，可以看出拉长的时候红色会变得比蓝色长，但压缩的时候却是蓝色变得比红色长，如此一来就更能体会在响应式设计里头的关键角色。 Flexbox是一个CSS3的盒子模型（box model），顾名思义它就是一个灵活的盒子（Flexible Box）。 Flexbox模型概念 第一步要来看Flexbox的盒子模型，根据W3C文章所描述，flex的盒子模型如下图所呈现，与一般的盒子...
阅读 2755·2023-04-25 19:20
阅读 590·2021-11-24 09:38
阅读 2689·2021-11-18 10:02
阅读 3367·2021-10-09 09:41
阅读 1846·2021-09-26 09:55
阅读 2271·2021-09-02 15:11
阅读 1586·2019-08-30 15:55
阅读 3439·2019-08-30 15:54
