Question

我正在尝试使用CSS 3创建一个语义正确的HTML 5网页。我创建了以下标记，该标记存在于我的body元素的根目录下。将display:table-cell应用于aside和section元素会使它们按照我希望的方式显示在列中。但是，我没有包含要应用display:table的元素。如果要应用的元素不包含在display:table-cell中，是否可以使用display:table？如果没有，是否有更好的机制来创建包含这些元素的列布局而不使用浮点数？

<aside>
    <nav>
       <ul>
           <li><a href="#">Link 1</a></li>
           <li><a href="#">Link 2</a></li>
       </ul>
    </nav>
</aside>
<section>
    Content goes here
</section>

Answer 1

是的，它是有效的。阅读有关匿名表对象的17.2.1 of CSS2 spec。更具体地说，这些部分......

生成丢失的子包装器：

如果是'表'的孩子C或   'inline-table'框不合适   表子，然后生成一个   C和C周围的匿名'table-row'框   C的所有连续兄弟姐妹   不适当的桌子。

如果是孩子   行组框的C不是   'table-row'框，然后生成一个   C和C周围的匿名'table-row'框   C的所有连续兄弟姐妹   不是'桌排'。

如果孩子C的   'table-row'框不是   'table-cell'，然后生成一个   C周围的匿名'table-cell'框   以及C的所有连续兄弟姐妹   不是'table-cell'盒子。

产生失踪的父母：

对于a中的每个“table-cell”框C.   连续内部表的序列   和'表格'兄弟姐妹，如果C的话   那么父母不是'桌排'   生成一个匿名的“表格行”框   C和所有连续的兄弟姐妹   C是'table-cell'框。



有关   每个适当的表子C在一个   连续正确表的序列   孩子，如果C是错误的话   生成匿名'表'或   “内联表”框C围绕C和所有   C的连续兄弟姐妹   适当的桌子。（如果是C的父母   是一个'内联'框，然后T必须是一个   'inline-table'框;否则它必须   是一个'表'框。）


'table-row'是   如果它的父母既不是a，也是错误的   行组框也不是'表'或   'inline-table'框。

'table-column'   如果它的父母是，那么盒子是错误的   既不是'table-column-group'也不是   一个'table'或'inline-table'框。

一排   组框，'table-column-group'框，   或者“表格标题”框是错误的   如果它的父母既不是“桌子”框   也不是'内联表'框。

Answer 2

来自the CSS2.1 specs：

17.2.1匿名表对象

HTML以外的文档语言可能不包含所有元素   CSS 2.1表模型。在这些情况下，“缺失”元素必须   假设为了表模型工作。任何表元素   将自动生成必要的匿名表对象   本身，由至少三个对应于a的嵌套对象组成   'table'/'inline-table'元素，'table-row'元素和a   'table-cell'元素。缺少元素会生成anonymous个对象   （例如，可视表格布局中的匿名框）

...

这意味着如果我们使用display: table-cell;而没有首先包含设置为display: table-row;的块中的单元格，那么该行将被暗示 - 浏览器将表现为所声明的行实际上存在

所以是的，使用不包含display:table-cell的{{1}}会生成有效的CSS。然而，这并不意味着它的行为是稳定的。即使在今天（2016年2月），display:table和display:table的行为在各种浏览器中仍然不一致。有关示例，请参阅Inconsistent behavior of display: table and display: table-cell。

使用display：table-cell不包含display：table

2 个答案:

17.2.1匿名表对象