父元素和子元素CSS之间的字体大小问题

Question

.logo{
width: 25%;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.3rem;
border: 2px solid gold;
}

.logo h1{
margin-left: 1vw;
/*font-size: 1.3rem;*/
border: 2px solid red;
}

<section id="l" class="logo">
            <i class="fa-solid fa-dragon"></i>
            <h1>Blog</h1>
</section>

当我更改 .logo 选择器中的字体大小时，我可以看到我的 h1 元素变大了。但是，当我执行相同操作但现在在 .logo h1 选择器中，大小不同。请注意，对于这两种情况，我都使用相同的字体大小。我不知道发生了什么。

Answer 1

1 rem 等于根元素的字体大小。例如，如果根元素的font-size设置为16px，那么1rem就等于16px。

使用 rem 单位可以更轻松地创建响应式设计，因为它允许您设置相对于根元素的大小，而不是使用绝对像素值。这意味着，如果用户更改浏览器设置中的默认字体大小，您的网站看起来仍然按比例正确。

Answer 2

您可以使用浏览器的开发工具检查工具来准确查看字体大小的设置者/位置。

如果父级中的 font-size 设置为 1.3rem，即设置 em 大小。

它的子级（h1）没有明确设置您设置的字体大小，因此它会采用浏览器设置的字体大小。在这个例子中，我将 h1 的字体大小设置为 1.5em。

因此 h1 中的 font-size 变为 1.5 * 1.3rem

在第二种情况下，您通过将 h1 的默认字体大小专门设置为 1.3rem（小于 1.5 * 1.3rem）来覆盖它。