cssline-height值为150%或1.5值有哪些区别

小编给大家分享一下css line-height值为150%或1.5值有哪些区别,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!

为新华等地区用户提供了全套网页设计制作服务,及新华网站建设行业解决方案。主营业务为成都做网站、成都网站设计、新华网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!

这是一个小小的不经意的问题,但是却常常被一些面试官提起。一般都会一下子进入懵逼状态,那让我们来看看区别在哪里?

我先新建一个html,代码如下:

         父元素内容         

        Web前端开发
        line-height行高问题         

下图是当line-height:150%的效果,父元素的行高为150%时,会根据父元素的字体大小先计算出行高值然后再让子元素继承。所以当line-height:150%时,字元素的行高等于16px * 150% = 24px:

css line-height值为150%或1.5值有哪些区别

下图是当line-height:1.5em的效果,父元素的行高为150%时,会根据父元素的字体大小先计算出行高值然后再让子元素继承。所以当line-height:1.5em时,子元素的行高等于16px * 1.5em = 24px:

css line-height值为150%或1.5值有哪些区别

下图是当line-height:1.5的效果,父元素行高为1.5时,会根据子元素的字体大小动态计算出行高值让子元素继承。所以,当line-height:1.5时,子元素行高等于30px * 1.5 = 45px:

css line-height值为150%或1.5值有哪些区别

看完了这篇文章,相信你对css line-height值为150%或1.5值有哪些区别有了一定的了解,想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


网站名称:cssline-height值为150%或1.5值有哪些区别
URL分享:http://bzwzjz.com/article/gpsjop.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 营销型网站建设 网站设计公司 成都定制网站建设 重庆网站制作 成都定制网站建设 专业网站设计 重庆企业网站建设 高端定制网站设计 重庆手机网站建设 成都网站制作 外贸网站建设 成都品牌网站设计 成都网站制作 移动手机网站制作 成都网站制作 成都网站建设 成都网站制作 成都网站建设推广 攀枝花网站设计 成都网站建设 成都网站设计 成都网站建设公司