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值有哪些区别
分享地址:http://csdahua.cn/article/gpsjop.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流