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

时间:2015-12-14 10:32:25

标签: html css html5 heading

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

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

任何人都有答案。



aside




2 个答案:

答案 0 :(得分:2)

根据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标记嵌套在articleasidenavsection元素中,则会h1呈现是不同的:

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

  

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

     

如果x是一个匹配元素的选择器   articlenav部分元素,则以下规则   捕获预期的内容:

@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标记在sectionaside等内嵌套1级时,默认情况下会font-size:1.5em

这解释了为什么h1section元素中的aside元素与font-size元素(1.5em)具有相同的h2,如这个问题。

现在,如果h1元素在sectionaside(或navarticle)元素中具有更高级别的嵌套,那么h1元素将获得字体越来越小。

为了说明这一点,请在此处查看this fiddle,因为h1嵌套在articlesection中 - 它的渲染率甚至小于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;
&#13;
sun.jvm.hotspot.*
&#13;
&#13;
&#13;

答案 1 :(得分:-1)

这是一个浏览器自定义样式) 例如。 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重置浏览器样式