欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

说一说line-height - 北风吹雪

程序员文章站 2022-03-29 09:03:22
...
line-height这个样式相信大家一定不会陌生,我们经常用它来让文本上下居中,这样做一般不出出现什么问题,但是如果对这个属性不是很熟悉的话,可能会踩到一些坑,今天亲自去试验了一下,并总结了一下line-height的几个特性。

首先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 - 北风吹雪说一说line-height - 北风吹雪

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

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

说一说line-height - 北风吹雪说一说line-height - 北风吹雪

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

说一说line-height - 北风吹雪

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

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

说一说line-height - 北风吹雪

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

说一说line-height - 北风吹雪

到这总结有以下几点

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

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

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

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