css中em的使用方法

em是一种相对单位，它是相对于父元素的字体大小来计算的。在CSS中，我们可以使用em来设置元素的尺寸、内外边距、行高等属性。

让我们来看看如何使用em来设置元素的尺寸。当我们将元素的宽度或高度设置为em时，它会根据父元素的字体大小来计算。例如，如果父元素的字体大小为16px，而我们将子元素的宽度设置为2em，那么子元素的宽度将为32px（2 * 16px）。

示例代码：

.parent {
  font-size: 16px;
}
.child {
  width: 2em;
}

在上面的示例中，父元素的字体大小为16px，子元素的宽度设置为2em。子元素的宽度将为32px。

除了尺寸，我们还可以使用em来设置元素的内外边距。当我们将元素的内外边距设置为em时，它也会根据父元素的字体大小来计算。例如，如果父元素的字体大小为16px，而我们将子元素的内边距设置为0.5em，那么子元素的内边距将为8px（0.5 * 16px）。

示例代码：

.parent {
  font-size: 16px;
}
.child {
  padding: 0.5em;
}

在上面的示例中，父元素的字体大小为16px，子元素的内边距设置为0.5em。子元素的内边距将为8px。

类似地，我们还可以使用em来设置元素的行高。当我们将元素的行高设置为em时，它同样会根据父元素的字体大小来计算。例如，如果父元素的字体大小为16px，而我们将子元素的行高设置为1.5em，那么子元素的行高将为24px（1.5 * 16px）。

示例代码：

.parent {
  font-size: 16px;
}
.child {
  line-height: 1.5em;
}

在上面的示例中，父元素的字体大小为16px，子元素的行高设置为1.5em。子元素的行高将为24px。

需要注意的是，em是一个相对单位，它会继承父元素的字体大小。如果父元素的字体大小发生变化，那么使用em设置的元素尺寸、内外边距和行高也会相应地发生变化。这使得em在响应式设计中非常有用，因为它可以根据不同屏幕尺寸自动调整元素的大小。

除了em，还有另一个与之类似的相对单位rem。不同于em是相对于父元素的字体大小计算，rem是相对于根元素（即html元素）的字体大小计算。这意味着rem在整个页面中始终保持一致，不会受到父元素字体大小的影响。rem在一些需要全局一致的尺寸设置上更为方便。

em是一种相对单位，它可以根据父元素的字体大小来计算元素的尺寸、内外边距和行高。它在响应式设计中非常有用，因为它可以根据不同屏幕尺寸自动调整元素的大小。与之类似的单位rem可以在需要全局一致的尺寸设置上使用。