html - 表中的 BLOCK 元素

Question

有了这种 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>

Answer 1

<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 特别描述了与此非常相似的内容。