有了这种 CSS 和 HTML 的组合,为什么 <header>HEADER</header>
是上面呈现 <nav>NAVIGATION</nav>
?
#wrapper { display: table; }
header { display: table-header-group; }
<div id="wrapper">
<nav>NAVIGATION</nav>
<header>HEADER</header>
</div>
最佳答案
<nav>
元素有 display:block
它是 display:table
元素的直接子元素,因此布局引擎在其周围生成“匿名包装盒”以强制其符合表格格式模型。同样,<header>
中的裸文本节点元素,其中有 display:table-header-group
, 被包裹起来。生成的“框树”与您在不使用 CSS 的情况下编写此 HTML 相同:
<table>
<tbody><tr><td><div>NAVIGATION</div></td></tr></tbody>
<thead><tr><td><div>HEADER</div></td></tr></thead>
</table>
还有一个 <table>
指定显示其 <thead>
的内容首先,然后是 <tbody>
, 所以你得到 HEADER 然后是 NAVIGATION。
参见 layout-internal display types 中关于“CSS3 Display”的讨论规范。示例 1 特别描述了与此非常相似的内容。
关于html - 表中的 BLOCK 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37688452/