特别声明：如果您喜欢小站的内容，可以点击年卡¥199.00元(
原价: ¥598元)、季卡¥78.00元(原价: ¥168元)、月卡¥28.00元(原价: ¥68元)进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: 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的值，那么h1的font-size: 100%会相对于div.container的font-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.container的font-size也设置为%值：
.container {
font-size: var(--font-size)
}
这个时候<h1>的font-size会相对于它的父元素div.container的font-size计算，而div.container会相对于它的父元素body的font-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-height和font-size类似，也是一个继承属性，就上面这个示例，每个元素的line-height计算出来的值如下表所示：
| 元素 | font-size |
line-height |
计算出来的line-height |
|---|---|---|---|
body |
16px |
120% |
120% ❯ 16px x 120% = 19.2px |
h1 |
32px |
继承body的line-height |
19.2px |
p |
16px |
继承body的line-height |
19.2px |
footer |
12px |
继承body的line-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中的滑块，查看body、div.container和h1三个元素的line-height的值变化：
- 先来看
<html>元素，该元素显式的设置了line-height值为1.15，计算出来的line-height的值为18.4px； <body>元素显式设置了font-size为100%和line-height的值为150%，计算出来的line-height为24px（即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百分值计算相对而言较为复杂，特别是在层级复杂的情况之下。就该示例而言，它的计算过程如下表所示：
如需转载，烦请注明出处：https://www.w3cplus.com/css/a-percentage-unit-in-css.html
如果文章中有不对之处，烦请各位大神拍正。如果你觉得这篇文章对你有所帮助，打个赏，让我有更大的动力去创作。(^_^)。看完了？还不过瘾？点击向作者提问！
