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然后导航。

请参阅layout-internal display types规范中对“CSS3 Display”的讨论。实施例1特别描述了与此非常相似的东西。

Answer 2

如果通过“malformatted”表示未正确对齐，则不 - 因为您正在将包装器的显示设置为表格。这不是实际的表格HTML元素。

表格内的BLOCK元素

2 个答案: