Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css] 第32天 说下line-height三种赋值方式有何区别? #115

Open
haizhilin2013 opened this issue May 17, 2019 · 5 comments
Open
Labels
css css

Comments

@haizhilin2013
Copy link
Collaborator

第32天 说下line-height三种赋值方式有何区别?

@haizhilin2013 haizhilin2013 added the css css label May 17, 2019
@tzjoke
Copy link

tzjoke commented May 28, 2019

line-height: 1.2 => 1.2 * font-size
line-height: 1.2em => em不确定性
line-height: 120% => 120% * font-size

@Konata9
Copy link

Konata9 commented Aug 26, 2019

line-height 可以有带单位及不带单位的写法(感觉其实是两种)。

div{
	line-height: 24px;
	line-height: 1.5;
	line-height: 1.5em;
	line-height: 150%;
}

对于应用在单个元素上,这几种写法的效果都是一样的(除了 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
Copy link

数字:font-size * number
px::就是这样
%:font-size * number%

@MrZ2019
Copy link

MrZ2019 commented Oct 10, 2020

line-height: 1.2 => 1.2 * font-size
line-height: 1.2em => em不确定性
line-height: 120% => 120% * font-size

@Iambecauseyouare
Copy link

px 是固定的元素高度
em 是相对于父级的
rem 是相对于根元素的

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css css
Projects
None yet
Development

No branches or pull requests

6 participants