Problem mit der Schriftgröße zwischen übergeordnetem und untergeordnetem Element-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>

Wenn ich die Schriftgröße im .logo-Selektor ändere, kann ich sehen, dass mein h1-Element größer wird. Wenn ich jedoch dasselbe mache, aber jetzt im .logo h1-Selektor, sind die Größen unterschiedlich. Beachten Sie, dass ich in beiden Fällen dieselbe Schriftgröße verwende. Ich weiß nicht, was passiert ist.

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）来覆盖它。