Skip to content

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

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

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

Activity

tzjoke

tzjoke commented on May 28, 2019

@tzjoke

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

Konata9

Konata9 commented on Aug 26, 2019

@Konata9

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

blueRoach commented on Jul 1, 2020

@blueRoach

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

smile-2008

smile-2008 commented on Oct 10, 2020

@smile-2008

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

Iambecauseyouare

Iambecauseyouare commented on Mar 17, 2023

@Iambecauseyouare

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @smile-2008@haizhilin2013@Konata9@blueRoach@tzjoke

        Issue actions

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