CSS 中的 Em 与 Rem 单位？

百变鹏仔 4周前 (09-20) #CSS

文章标签单位

在使用CSS属性设置元素大小时，您可能会注意到两个选项，一个是绝对单位，另一个是相对单位。绝对单位是相同的，是固定的，可以使用cm、mm、px来设置大小。另一方面，相对单位是相对于其他东西的，可以是父元素或任何其他元素。

在本教程中，我们将研究CSS中em和rem单位之间的比较。

The Em unit

em单位使得可以改变相对于其父元素的字体大小的元素的大小。这意味着如果父元素的大小发生变化，子元素的大小也会发生变化。

Let’s look at an example to understand what does the em unit do.

立即学习“前端免费学习笔记（深入）”；

Example

在这个例子中，我们将把子元素的字体大小改为35px。子元素的边距也将改为50px。

在这里，我们首先创建了一个父元素，然后将其大小设置为17.5像素，子元素的字体大小设置为1em，这意味着子元素的字体大小将是父元素的两倍，元素的边距将保持不变。让我们来看一下代码的输出结果。

Note − The usage of the font-size property. The font-size is relative to the father (parent) element when it is used on other properties.

<!DOCTYPE html><html lang="en"><head>   <title>Difference between em and rem</title>   <style>      .father {         paddding: 0px;         font-size: 16px;      }      .son {         margin: 1em;         font-size: 1em;      }   </style></head><body>   <div class="father">      This is the Father element      <div class="son">         This is Son element      </div>   </div></body></html>

在上面的输出中，有一个父元素和一个子元素。在输出中，子元素的大小与父元素相同

rem单位

单位rem相对于元素根的字体大小，即html元素。如果没有指定字体大小，则使用浏览器的默认值，不考虑父元素，只考虑根元素。

Example

We will be keeping the font size of the child element to 50px and then setting the margin of the element to 40px. The size of the rem unit will be relative for all declarations unlike em.

In the following example, we first used the root element and then created a parent element and the child element. We then set the font size of the root element to 18px and the font-size of the parent to 15px. The size of the font of the child element was then set to 1.5rem which means double the size of the root element and not the parent element. Let’s look at the output to see what the rem unit does.

<!DOCTYPE html><html lang="en"><head>   <title>The difference between em and rem units</title>   <style>      html {         font-size: 18px;      }      .son {         font-size: 2rem;         margin: 1.5rem;      }      .father {         font-size: 13px;      }   </style></head><body>   <div class="father">      This is parent      <div class="son">         This is Child in rem unit system      </div>   </div></body></html>

You can see in the above output that the child element is not the double of the parent element but it is the double of the root element.

The unit em, is relative to the font-size of its nearest parent and it can lead to the compounding effect. The rem unit, is relative to the HTML root font size but it does not lead to the compounding effect.