为何相同font-size设置呈现不同效果？div与h1字号差异疑问

先看你给出的代码：

<div style="font-size: 30px;">
    <h1>Sample text</h1>
</div>

<div>
    <h1 style="font-size: 30px;">Sample text</h1>
</div>

问题出在浏览器给<h1>标签自带的默认样式上：

• 浏览器原生样式里，<h1>的字体大小不是固定值，而是相对单位（比如2em或者200%），这个值是基于它父元素的字体大小来计算的。
• 第一段代码中，父<div>设了font-size:30px，<h1>会以这个30px为基准，再套用默认的放大比例（通常是2倍），最终显示的字体大小是30px × 2 = 60px（不同浏览器默认比例可能略有差别，但逻辑一致）。
• 第二段代码直接给<h1>加了font-size:30px的行内样式，行内样式优先级高于浏览器默认样式，所以<h1>直接显示30px的字体大小。

说白了就是：第一段的h1是在父元素30px的基础上放大了默认倍数，第二段的h1直接固定成30px，两者大小自然不一样。

内容的提问来源于stack exchange，提问作者Fish Fisher