em的基本用法em 是 CSS 中的一种相对单位，它代表的是相对于当前元素的字体大小（font size）。em 单位的

em 是 CSS 中的一种相对单位，它代表的是相对于当前元素的字体大小（font size）。em 单位的一个重要特点是它的相对性，这使得它非常适合用来创建响应式和可伸缩的设计。以下是 em 的一些基本用法：

1em 默认等于当前元素父元素的字体大小。如果是在 <body> 或者直接子元素中使用 1em，那么它通常等于浏览器默认的字体大小（通常是 16px）。
2em 表示当前元素字体大小的两倍。
0.5em 表示当前元素字体大小的一半。

字体大小
- 设置字体大小时，em 可以让字体大小相对于父元素的字体大小进行缩放。
```
css
p {
  font-size: 1.5em; /* 字体大小为父元素的1.5倍 */
}
```

边距和填充

css
.box {
  padding: 0.5em; /* 内边距为当前元素字体大小的一半 */
  margin: 2em;    /* 外边距为当前元素字体大小的两倍 */
}

元素尺寸

css
.element {
  width: 10em; /* 宽度为当前元素字体大小的10倍 */
  height: 5em; /* 高度为当前元素字体大小的5倍 */
}

当使用 em 时，需要注意递归的相对性。例如，如果一个父元素的字体大小为 16px，设置了 1.5em 的字体大小给子元素，那么子元素的字体大小将是 24px。如果再给这个子元素的子元素设置 1.5em 的字体大小，那么这个子元素的字体大小将是 36px（基于其父元素的 24px）。
在实际应用中，为了简化计算并避免过多的嵌套缩放，有时会考虑使用 rem 单位来代替 em，因为 rem 总是相对于根元素（通常是 <html> 标签）的字体大小。

假设 <html> 的字体大小默认为 16px，则：

css
html {
  font-size: 16px;
}
body {
  font-size: 1em; /* 仍然是 16px */
}
h1 {
  font-size: 2em; /* 32px */
}
p {
  font-size: 0.5em; /* 8px */
}

通过这种方式，可以创建一个基于相对单位的灵活且一致的布局。