深入理解CSS中的rem和em单位_css em继承-CSDN博客

本文链接：https://blog.csdn.net/My_wife_QBL/article/details/140344027

在CSS（层叠样式表）中，rem和em是两种常用的相对长度单位，它们在网页设计和开发中扮演着重要角色。虽然它们都用于定义相对尺寸，但它们的工作原理和应用场景有所不同。本文将详细探讨rem和em的区别，帮助开发者更好地理解和应用这两种单位。

em是一个相对长度单位，它的大小取决于其父元素的字体大小。具体来说，1em等于当前元素的字体大小。如果当前元素没有显式设置字体大小，那么它将继承其父元素的字体大小。

body {
  font-size: 16px;
}

.parent {
  font-size: 20px;
}

.child {
  font-size: 1em; /* 继承自.parent，即20px */
  margin: 1em;   /* 20px */
}

在这个示例中，.child元素的字体大小和外边距都是20px，因为它们继承了.parent元素的字体大小。

rem（root em）也是一个相对长度单位，但它的大小取决于根元素（即<html>元素）的字体大小。具体来说，1rem等于根元素的字体大小。无论元素在文档中的位置如何，rem值始终基于根元素的字体大小。

html {
  font-size: 16px;
}

.parent {
  font-size: 20px;
}

.child {
  font-size: 1rem; /* 16px */
  margin: 1rem;   /* 16px */
}

在这个示例中，.child元素的字体大小和外边距都是16px，因为它们基于根元素的字体大小，而不是.parent元素的字体大小。

考虑以下HTML和CSS代码：

<div class="parent">
  <div class="child">Child Element</div>
</div>

html {
  font-size: 16px;
}

.parent {
  font-size: 20px;
}

.child {
  font-size: 1em; /* 20px */
  margin: 1em;   /* 20px */
}

在这个示例中，.child元素的字体大小和外边距都是20px，因为它们基于.parent元素的字体大小。

如果使用rem单位：

html {
  font-size: 16px;
}

.parent {
  font-size: 20px;
}

.child {
  font-size: 1rem; /* 16px */
  margin: 1rem;   /* 16px */
}

在这个示例中，.child元素的字体大小和外边距都是16px，因为它们基于根元素的字体大小，而不是.parent元素的字体大小。

rem和em都是CSS中常用的相对长度单位，它们在基准、继承性、应用场景和性能影响等方面存在显著差异。理解这些差异有助于开发者在实际项目中选择合适的方法来定义尺寸。

希望本文能为大家提供一个清晰的理解和实用的指导，帮助大家在实际开发中更好地应用rem和em单位。