说一说line-height-北风吹雪

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了说一说line-height-北风吹雪，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1468字，纯文字阅读大概需要3分钟。

内容图文

首先line-height有以下几种标准的写法:

写法1、line-height:normal;　　　 //等价于写法5，固定值为数字1.2,默认为normal

写法2、line-height:inherit;　　　　//父元素继承

写法3、line-height:24px;　　　　 //通过像素px或者em等单位赋值

写法4、line-height:150%;　　 //line-height=font-size*1.5

写法5、line-height:1.5;　　　 //line-height=font-size*1.5

首先看一下写法3可能存在什么问题，如图：

可以看出，父元素设置行高，而子元素如果没有设置行高，那么子元素会采用父元素设置的line-height，不管子元素的font-size多大，都不会改变行高，所以当子元素font-size>父元素line-height的时候，会出现字体重叠或者其它不想看到的样式。

其次写法4和5看起来虽然一样，却有不同之处，如下图：

上面两种写法都会得到同样的效果，如图：

现在把子元素字体增大一倍

通过百分比设置的行高，line-height = 200%*父元素 font-size = 32px，子元素行高不会发生变化，导致字体重叠

通过数字设置的行高，子元素的行高会重新计算，line-height=父元素行高比例因子*子元素font-size=2*64=128px;子元素行高会重新计算

到这总结有以下几点

　　line-height具有继承性(inherited)。

　　元素设置了line-height等于像素值px或者em时，那么他的子元素（没有设置行高的子元素）会采用父元素的line-height，并且不会因为字体大小而改变本身的行高。

　　line-height会根据父元素设置的方式，确定自身行高是否重新计算。即写法4和5的区别

相信到这里你已经对line-height有一定的了解了

内容总结

以上是互联网集市为您收集整理的说一说line-height-北风吹雪全部内容，希望文章能够帮你解决说一说line-height-北风吹雪所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端