CSS中百分比单位计算方式

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

CSS中的单位有很多类型,不同类型单位计算方式也有所不同,特别是百分比(%单位,它的计算和使用的属性有着直接关系。其中最为重要的是:百分比是一定要有其对应的参照值,也就是说,百分比值是一种相对值,任何时候要分析它的计算值,都需要正确的找到它的参照值。言外之意,CSS中的百分比单位值最终计算出来的值是可变的。在这篇文章中,我们主要来看看百分比单位在不同使用场景中计算方式。

在CSS中能运用%值的属性很多,为了能让大家更好的理解使用%的规则,我们从最熟悉和最简单地属性开始。

font-size中的%

font-size属性中,有的时候会取%为单位,比如:

:root {
    --font-size: 100%
}

h1 {
    font-size: var(--font-size)
}

font-size的值为%值时,它的计算是相对于父元素的font-size来计算,如果父元素(以及它的祖先元素)未显式设置font-size值的话,将会以浏览器的默认值16px为基准。比如下面这个示例:

<body>
    <div class="container">
        <h1>font-size</h1>
    </div>
</body>

:root {
    --font-size: 100%;
}

h1 {
    font-size: var(--font-size);
}

设置了%的元素将会根据它的DOM层级从底层向上层寻找,将会相对于离元素最近的父元素的font-size值计算。比如上面示例:

如果div.container显式设置了font-size的值,那么h1font-size: 100%会相对于div.containerfont-size值计算;反之往上寻找div.container的父元素(本例中对应的是body)的font-size。依此类推,直到寻找到显式设置了font-size值的祖先元素。这个过程有点类似于JavaScript中的事件冒泡的过程:

比如下面这个示例,你拖动下面的滑块,可以看到<h1>元素font-size的变化:

示例中body显示设置了font-size: 100%,计算出来的px值是16px,而且该示例<h1>font-size是相对于<body>来计算。我们可以用下面的表格来整个计算的变化过程:

font-size font-size: 100% (<body>) <h1>计算后的font-size
50% 100% x 16 = 16px 50% ❯ 50% x 16 = 8px
100% 100% x 16 = 16px 100% ❯ 100% x 16 = 16px
150% 100% x 16 = 16px 150% ❯ 150% x 16 = 24px
200% 100% x 16 = 16px 200% ❯ 200% x 16 = 32px

在上面的示例上稍作调整,把div.containerfont-size也设置为%值:

.container {
    font-size: var(--font-size)
}

这个时候<h1>font-size会相对于它的父元素div.containerfont-size计算,而div.container会相对于它的父元素bodyfont-size计算。整体的效果如下:

同样用表格来描述它们的计算过程:

font-size font-size: 100% (<body>) <div.container>计算后的值 <h1>计算后的font-size
50% 100% x 16 = 16px 50% ❯ 50% x 16 = 8px 50% ❯ 50% x 8 = 4px
100% 100% x 16 = 16px 100% ❯ 100% x 16 = 16px 100% ❯ 100% x 16 = 16px
150% 100% x 16 = 16px 150% ❯ 150% x 16 = 24px 150% ❯ 150% x 24 = 36px
200% 100% x 16 = 16px 200% ❯ 200% x 16 = 32px 200% ❯ 200% x 32 = 64px

如果在每个DOM元素的font-size都采用%值,那么越在DOM底层的元素,其font-size计算越复杂。

line-height中的%

CSS中的line-height取值为%时,它的计算方式是基于元素自身的font-size的值来计算。如果元素自身未显式设置font-size,则会基于元素继承过来的font-size的值计算。

比如下面这个示例:

<!-- HTML -->
<body>
    <h1></h1>
    <p></p>
    <footer></footer>
</body>

/* CSS */
body {
    font-size: 16px;
    line-height: 120%;
}

h1 {
    font-size: 32px;
}

p {
    font-size: 16px;
}

footer {
    font-size: 12px;
}

注意,line-heightfont-size类似,也是一个继承属性,就上面这个示例,每个元素的line-height计算出来的值如下表所示:

元素 font-size line-height 计算出来的line-height
body 16px 120% 120% ❯ 16px x 120% = 19.2px
h1 32px 继承bodyline-height 19.2px
p 16px 继承bodyline-height 19.2px
footer 12px 继承bodyline-height 19.2px

上面的示例中稍作调整,如果显式的在每个元素中设置font-size的值都是120%,这个时候每个元素的line-height的就会像下表这样:

元素 font-size line-height 计算出来的line-height
body 16px 120% 120% ❯ 16px x 120% = 19.2px
h1 32px 120% 120% ❯ 32px x 120% = 38.4px
p 16px 120% 120% ❯ 16px x 120% = 19.2px
footer 12px 120% 120% ❯ 12px x 120% = 14.4px

你可能看出它们之间的差异了。

上面的示例还算是简单的,因为每个元素的font-size都是固定单位px的值。如果元素的font-size是个%值,而且元素还有相应的嵌套关系,那么每个元素的line-height计算会更复杂一些。它的计算要分两个步骤:

  • 根据font-size的计算原理,先计算出每个元素自身的font-size
  • 元素的line-height根据元素自身的font-size再计算出line-height的值

来看一个简单的示例:

<!-- HTML -->
<body>
    <div class="container">
        <h1></h1>
    </div>
</body>

/* CSS */
:root {
    --font-size: 100%;
}

body {
    font-size: 100%;
    line-height: 150%;
}

.container {
    font-size: var(--font-size)
}

h1 {
    font-size: var(--font-size)
    line-height: 120%
}

你可以尝试着拖动下面Demo中的滑块,查看bodydiv.containerh1三个元素的line-height的值变化:

  • 先来看<html>元素,该元素显式的设置了line-height值为1.15,计算出来的line-height的值为18.4px
  • <body>元素显式设置了font-size100%line-height的值为150%,计算出来的line-height24px(即100% x 16px x 150% = 24px);
  • div.container元素会继承<body>line-height,即计算出来的值是24px,即使font-size的值有所改变,但该元素并没有显式设置line-height的值,因此该元素的line-height不受元素自身的font-size值影响

最为复杂的是h1元素,该元素显式设置了font-size的值和line-height的值,而且它们的值都是百分比。虽然line-height的计算是基于font-size,并不复杂;但元素的font-size百分值计算相对而言较为复杂,特别是在层级复杂的情况之下。就该示例而言,它的计算过程如下表所示:

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/css/a-percentage-unit-in-css.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部