css中的em是一种相对长度单位，它的取值不是固定的绝对值，而是相对于当前元素的某个参考值来计算最终的实际尺寸，在响应式布局和字体相关样式设置中使用频率很高。
em单位的核心定义
em的本质是相对单位，它的计算基准和当前元素的font-size属性值直接相关。在没有额外设置的情况下，1em等于当前元素的字体大小。如果当前元素没有手动设置font-size，则会继承父元素的font-size值作为计算基准。
需要注意的是，em不仅可以用在font-size属性上，也可以用在宽度、高度、边距、内边距等其他css属性中，不同属性下的计算基准都是当前元素生效的font-size值。
em单位的计算规则
我们可以通过几个具体的场景来理解em的计算逻辑：
场景1：直接设置元素的font-size为em
当给元素自身的font-size设置em值时，基准值是该元素继承来的父元素font-size。
/* 父元素字体大小为16px，是浏览器默认基准值 */
.parent {
font-size: 16px;
}
/* 子元素的font-size为2em，计算为16px * 2 = 32px */
.child {
font-size: 2em;
}
场景2：其他属性使用em单位
当宽度、边距等属性使用em时，基准值是当前元素自身的font-size值。
.box {
font-size: 20px;
/* 宽度计算为20px * 5 = 100px */
width: 5em;
/* 内边距计算为20px * 1 = 20px */
padding: 1em;
}
场景3：嵌套场景下的em计算
如果元素存在多层嵌套，且每一层都设置了em单位的font-size，那么内层的em会基于外层的生效字体大小逐级计算，容易出现复合缩放的情况。
.outer {
font-size: 16px;
}
.middle {
/* 16px * 1.5 = 24px */
font-size: 1.5em;
}
.inner {
/* 24px * 1.2 = 28.8px */
font-size: 1.2em;
/* 宽度计算为28.8px * 10 = 288px */
width: 10em;
}
em和px的区别
px是绝对单位，1px对应屏幕的一个像素点，取值固定不会随环境变化；em是相对单位，取值会随父元素或自身字体大小变化，两者的核心区别如下：
| 对比维度 | px单位 | em单位 |
|---|---|---|
| 取值性质 | 绝对固定 | 相对动态 |
| 计算基准 | 屏幕像素 | 当前元素font-size |
| 适配性 | 弱，固定尺寸 | 强，随字体缩放 |
| 嵌套影响 | 无 | 多层嵌套易复合计算 |
em单位的常见使用场景
- 字体大小设置：适合需要随整体布局缩放的文本，比如文章正文的字体可以基于根元素或父容器字体大小设置em值，方便统一调整整体文字尺寸。
- 元素内边距和外边距：让元素的内外间距和自身字体大小保持比例，比如按钮的内边距用em设置，字体放大时间距也会同步放大，保持视觉协调。
- 简单响应式布局：在不使用复杂媒体查询的场景下，通过调整根元素的
font-size，让所有使用em的子元素尺寸同步缩放，实现基础的适配效果。
使用em的注意事项
避免多层嵌套时连续使用em设置font-size，否则会出现尺寸逐级放大的复合效应，导致最终尺寸超出预期。
如果需要在整个项目中统一使用相对单位，且避免嵌套计算的问题，可以优先考虑rem单位，rem的基准是根元素的font-size，不会受父元素嵌套影响，比em更适合全局的尺寸统一设置。
实际开发中可以根据需求选择单位，em更适合单个组件内部的相对尺寸设置，rem更适合全局的布局尺寸统一，px则适合需要固定尺寸的元素，比如边框宽度等。