理解 em 单位的相对性是关键：它始终相对于父元素的计算字体大小（font-size），而非绝对像素值；当 h1 默认使用 2em，其实际尺寸会随容器 font-size 动态缩放。
理解 `em` 单位的相对性是关键：它始终相对于父元素的计算字体大小（`font-size`），而非绝对像素值；当 `h1` 默认使用 `2em`，其实际尺寸会随容器 `font-size` 动态缩放。
在 CSS 中，em 是一个相对长度单位，其数值始终基于当前元素父级的计算字体大小（computed font-size）。这与 px（绝对像素）有本质区别——px 值固定不变，而 em 会逐层继承、叠加缩放。
以问题中的两个示例为例：
<!-- 示例 1：font-size 设置在父 div 上 --> <div style="font-size: 30px;"> <h1>Sample text</h1> <!-- h1 默认 font-size: 2em --> </div> <!-- 示例 2：font-size 直接设置在 h1 上 --> <div> <h1 style="font-size: 30px;">Sample text</h1> </div>
- 在示例 1中，<div> 的 font-size: 30px 成为 <h1> 的参考基准；由于 <h1> 默认样式为 font-size: 2em（浏览器 UA 样式表定义，Chrome 等主流浏览器均如此），其最终计算值为 2 × 30px = 60px。
- 在示例 2中，<h1> 的 font-size: 30px 是显式声明的绝对值，直接覆盖了默认 2em，因此渲染结果就是精确的 30px。
⚠️ 注意事项：
- 浏览器对标题标签（h1–h6）有内置 em 基准（如 h1: 2em, h2: 1.5em, h3: 1.17em），该值基于根元素或最近设置了 font-size 的祖先；
- 若父元素未显式设置 font-size，则回退至继承链上的上一级，最终可能落到 <html> 的默认 16px（此时 h1 默认为 2em = 32px）；
- 使用 rem 可规避嵌套缩放问题（1rem = <html> 元素的 font-size），适合需要全局统一缩放的场景。
✅ 推荐实践：
立即学习“前端免费学习笔记（深入）”；
- 明确重置标题样式时，优先用 px 或 rem 避免意外放大；
- 如需响应式缩放，可结合 clamp() 或 CSS 自定义属性 + em 实现可控继承；
- 调试时善用浏览器开发者工具的“Computed”面板，查看实际生效的 font-size 值及其来源。
归根结底：不是字体“变大了”，而是你定义的 em 正在忠实地执行它的设计使命——按比例继承。 理解这一机制，是掌控 CSS 排版精度的第一步。
