css中的line-height设置数字,em和百分比的区别

疑惑

关于line-height这个css属性在平常布局中真的很熟悉了,以前简单的用法都是直接设置具体像素值:line-height:28px;随着考虑到响应式等因素,慢慢开始了解无单位数字和使用em或百分比。一直以来都觉得为什么需要定义三种格式?明明他们几个形式都是属于字号的倍数而已。所以一直想探究一下究竟有什么不一样。

实验

首先我定义了四个p元素,每个line-height设置分别是px,em,无单位数值和百分比。效果如下:
在这里插入图片描述

发现它们在这种状态下是一样的,都是属于当前字号的2倍。
现在我们在它们的父元素进行设置line-height,分别尝试这四种形式时子元素是如何表现的。

  • 首先使用具体像素值,子元素是继承父元素的具体像素值的,跟我们预想的结果一样:
    在这里插入图片描述

  • 其次使用em。发现与我们预期的不一样,一开始我们认为的是,em是当前字号的倍数。但现实是当父元素设置em时,子元素的line-height值是不会再重新与当前的字号进行计算的,而是直接继承父元素的字号倍数。
    在这里插入图片描述

  • 现在我们使用无单位数字。如果说em跟直接设置数字是一样为2倍的话,那他们的表现应该一致,也是父元素的字号*数字。但原来其它们并不一样,数字值对于子元素的继承是会与当前元素的字号再进行计算,即:当前字号*数字。数字属性才是真正意义上的字号的两倍,在响应式开发中是我们的,推荐使用此形式
    在这里插入图片描述

  • 最后,我们使用百分比。这次已经不敢乱猜了,不自信自己是否真正了解line-height。demo表明百分比与em值的表现是一样的,同样是不会对子元素的字号再进行计算,而是直接继承父元素字号乘积,与当前元素的字号无关。
    在这里插入图片描述

结论

最后,line-height的除具体像素值外,其他三种形式在没有子元素的情况下,他们的表现是相同的。
他们的不同之处在于对子元素的继承。
在我们的响应式开发中,推荐使用无单位数字,能够让你在设置父元素的行高时响应整块区域,不需要进行多个元素多次赋值改变。
由此我们明白了line-height设置数字,em和百分比的区别。细节之处平时很少注意理解,希望有一天你也意识到对line-height确定时能看到这篇文帮助理解。ღ( ´・ᴗ・` )比心

  • 7
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
line-height:2.4em表示行高为当前字体大小的2.4倍。 em是一个相对单位,它是根据当前元素的字体大小来计算行高。如果当前元素的字体大小为10像素,那么line-height:2.4em就表示行高为24像素。这个值会根据字体大小的变化而自动调整。所以,line-height:2.4em可以根据字体大小的变化来保持一致的行高。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [CSS的单位及css3的calc()及line-height百分比](https://blog.csdn.net/ime33/article/details/78530763)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [undefined](undefined)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [CSS的单位及line-height百分比](https://blog.csdn.net/LonelyChristmasya/article/details/77091790)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值