在 CSS 布局中，em 是一个相对长度单位，它相对于元素自身的 font-size 计算实际像素值。当我们给一个元素设置宽度为 10em 并添加 transition 时，如果没有看到放大效果，核心原因往往出在 em 的参照值和 transition 的触发条件上。
为什么 10em 不一定会放大元素
假设一个 div 的 font-size 是 16px，那么 10em 就是 160px。如果它的父容器或自身 font-size 始终没变，10em 对应的像素就是固定的，元素自然不会“放大”。很多人误以为写死 10em 就会比默认尺寸大，其实它只取决于字体大小。
常见误区
- 认为 em 是相对于屏幕或父容器宽度的绝对放大
- 在 font-size 为 0 或不继承的情况下使用 em
- 给静态页面直接写死 10em，没有交互改变它
transition 为何没有动画
transition 的作用是让属性在变化前后产生平滑过渡。如果元素从一开始就是 10em，或者你通过 class 切换但前后值相同，浏览器不会执行过渡。此外，若元素使用了 display:none 后再显示，部分场景下过渡也会失效。
基础示例
下面代码展示了一个正确的放大写法：鼠标悬停时改变 font-size，从而让 10em 实际像素变大，并看到过渡。
<style>
.box {
font-size: 16px;
width: 10em;
height: 10em;
background: #4caf50;
transition: width 0.4s, height 0.4s, font-size 0.4s;
}
.box:hover {
font-size: 24px;
}
</style>
<div class="box"></div>
只过渡 em 相关属性的错误写法
如果你只写 transition:all 0.4s，但从未改变 font-size 或显式改 width，元素不会动。
/* 错误：font-size 未变，10em 计算值不变 */
.card {
font-size: 16px;
width: 10em;
transition: width 0.4s;
}
如何确认问题所在
可以用浏览器开发者工具查看元素计算后的 width 值。如果悬停前后都是 160px，说明 em 参照没变。此时应检查 font-size 继承链，或用 px、rem 替代做对比测试。
| 情况 | 现象 | 解决办法 |
|---|---|---|
| font-size 不变 | 10em 像素固定 | 悬停改 font-size 或用 rem |
| 前后值相同 | 无过渡 | 确保切换 class 改变属性 |
| display 切换 | 过渡丢失 | 用 visibility 替代 none |
小结
设置 10em 加 transition 没放大，并不是 CSS 失效，而是 em 依赖字体大小、transition 依赖属性变化。理清这两点，就能写出符合预期的动画效果。
CSStransitionem单位修改时间：2026-07-27 13:45:27