Question

标题标记行为（h1和h2）如果我在h1或{{1}中写h2和section它显示相同的字体大小，如果我把它放在aside或section标记之外，它就可以正常工作。

我已经搜索了很多，但没有得到答案。

任何人都有答案。

＆＃13;

aside

＆＃13;

Answer 1

根据W3C规范，可以找到HTML5的默认样式here

现在，根据上面的规范，default styling for the h1 and h2 tag如下：

h1 { margin-top: 0.67em; margin-bottom: 0.67em; font-size: 2.00em; font-weight: bold; }
h2 { margin-top: 0.83em; margin-bottom: 0.83em; font-size: 1.50em; font-weight: bold; }

因此，默认情况下，h1标记包含font-size: 2.00em;，h2标记包含font-size:1.5em

到目前为止一切顺利。

但是，如果h1标记嵌套在article，aside，nav或section元素中，则会h1呈现是不同的：

以下是规范中的relevant section :(粗体是我的）

article，支持，nav和部分元素预计会影响   h1元素的边距和字体大小，以及h2-h5元素   基于嵌套，遵循hgroup元素中的h1个元素   深度。

如果x是一个匹配元素的选择器   article，，，nav或部分元素，则以下规则   捕获预期的内容：

@namespace url(http://www.w3.org/1999/xhtml);

x h1 { margin-top: 0.83em; margin-bottom: 0.83em; font-size: 1.50em; }
x x h1 { margin-top: 1.00em; margin-bottom: 1.00em; font-size: 1.17em; }
x x x h1 { margin-top: 1.33em; margin-bottom: 1.33em; font-size: 1.00em; }
x x x x h1 { margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; }
x x x x x h1 { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; }

请注意，h1标记在section或aside等内嵌套1级时，默认情况下会font-size:1.5em。

这解释了为什么h1或section元素中的aside元素与font-size元素（1.5em）具有相同的h2，如这个问题。

现在，如果h1元素在section，aside（或nav或article）元素中具有更高级别的嵌套，那么h1元素将获得字体越来越小。

为了说明这一点，请在此处查看this fiddle，因为h1嵌套在article和section中 - 它的渲染率甚至小于h2 HTML5默认样式的<h1>heading 1</h1> <h2>heading 2</h2> <h3>heading 3</h3> <hr /> <section> <h1>heading 1</h1> <h2>heading 2</h2> <h3>heading 3</h3> </section> <hr /> <article> <section> <h1>heading 1 - Nested by 2 levels - *smaller* than h2 !!</h1> <h2>heading 2</h2> <h3>heading 3</h3> </section> </article>。

＆＃13;

sun.jvm.hotspot.*

＆＃13;

Answer 2

这是一个浏览器自定义样式）例如。 h1在节之外或在旁边有font-size: 2em，但在节，文章，旁边，导航有font-size: 1.5em 参见devtools。

:-webkit-any(article,aside,nav,section) h1 {
font-size: 1.5em;
-webkit-margin-before: 0.83em;
-webkit-margin-after: 0.83em;
}

在article, section, nav, aside h1之外有这种风格

h1 {
display: block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}

如果您不想要这样的惊喜 - 请使用normalize.css重置浏览器样式

带标题的标题标记的不同行为

2 个答案: