第32天 说下line-height三种赋值方式有何区别?
Activity
tzjoke commentedon May 28, 2019
line-height: 1.2 => 1.2 * font-size
line-height: 1.2em => em不确定性
line-height: 120% => 120% * font-size
Konata9 commentedon Aug 26, 2019
line-height
可以有带单位及不带单位的写法(感觉其实是两种)。对于应用在单个元素上,这几种写法的效果都是一样的(除了 px 需要一些计算)。但由于
line-height
是可以被继承的,因此会影响内部子元素的line-height
。简单的可以总结为:带有单位的
line-height
会被计算成px
后继承。子元素的line-height
= 父元素的line-height
*font-size
(如果是 px 了就直接继承)而不带单位的
line-height
被继承的是倍数,子元素的line-height
= 子元素的font-size
* 继承的倍数简单的示例: https://codepen.io/Konata9/pen/oNvZGqo
参考文章:
line-height 3种设置方式的区别
blueRoach commentedon Jul 1, 2020
数字:font-size * number
px::就是这样
%:font-size * number%
smile-2008 commentedon Oct 10, 2020
line-height: 1.2 => 1.2 * font-size
line-height: 1.2em => em不确定性
line-height: 120% => 120% * font-size
Iambecauseyouare commentedon Mar 17, 2023
px 是固定的元素高度
em 是相对于父级的
rem 是相对于根元素的