line-height1.5和line-height:150%的区别

一、区别
区别体现在子元素继承时,如下:

父元素设置line-height:1.5会直接继承给子元素,子元素根据自己的font-size再去计算子元素自己的line-height。
父元素设置line-height:150%是计算好了line-height值,然后把这个计算值给子元素继承,子元素继承拿到的就是最终的值了。此时子元素设置font-size就对其line-height无影响了。
二、举例
比如父元素设置属性:font- size:14px;line-height:1.5,child设置font-size:26px;

那么父元素:line-height = 14px * 1.5 = 21px,子元素:line-height = 26px * 1.5 = 39px。

父元素设置属性:font-size:14px;line-height:150%,child设置font-size:26px;

那么父元素:line-height = 14px * 150% = 21px,子元素:line-height = 父元素的line-height = 21px。

父元素font-size:14px;line-height:1.5;计算值是21px
子元素font-size:26px;line-height会继承父元素的1.5,计算值是39px
<div class="father father2">
    父元素font-size:14px;line-height:150%;计算值是21px
    <div class="son son2">
        子元素font-size:26px;line-height=父元素的line-height=21px
    </div>
</div>
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201017205338118.png#pic_center)

文章出自:http://www.cnblogs.com/starof/p/4742323.html

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值