CSS中的Em与Rem单位

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

在本教程中，我们将看一下CSS中em和rem单位的比较。

雇员单位

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

让我们看一个例子来了解em单元的作用。

示例

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

在这里，我们首先创建了一个父元素，然后将其大小设置为17.5px，子元素的字体大小设置为1em，这意味着子元素的字体大小将是双倍，元素的边距将是相同的。让我们来看看我们将从代码中得到的输出。

注意 – font-size属性的用法。在其他属性上使用时，字体大小是相对于父（父）元素的。

<!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是相对于根元素的字体大小而言的，根元素是指html元素。如果没有指定的字体大小，则使用浏览器的默认值，父元素不被考虑，这里只考虑根元素。

示例

我们将保持子元素的字体大小为50px，然后将该元素的边距设置为40px。rem单位的大小对于所有的声明都将是相对的，与em不同。

在下面的例子中，我们首先使用根元素，然后创建了一个父元素和子元素。然后我们将根元素的字体大小设置为18px，父元素的字体大小设置为15px。然后，子元素的字体大小被设置为1.5rem，这意味着是根元素而不是父元素的两倍大小。让我们看看输出结果，看看rem单元的作用。

<!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>
</body>
</html>

你可以在上面的输出中看到，子元素不是父元素的替身，而是根元素的替身。

em单位，是相对于其最近的父字体大小而言的，它可能导致复合效应。rem单位，是相对于HTML根字体大小而言的，但它不会导致复合效应。