为什么 child 的宽度在显示时没有扩展到 parent 的宽度：table-cell？

Question

div {
  width: 100px;
  height: 100px;
}
p {
  margin: 0px;
  padding: 0px;
  display: table-cell;
  width: 100%;
  height: 100%;
  border: 1px solid green;
}

<div>
   <p>hello</p>
 </div>

现在这里的child元素p没有扩展到它的parent的宽度和height: 100px，为什么？如果 display: table-cell 变为 display: table 或其他如 block，这里的 child 元素 <p> 确实扩展为它的 parent 的 width 和 height :100px.

div {
  width: 100px;
  height: 100px;
}
p {
  margin: 0px;
  padding: 0px;
  display: table;
  width: 100%;
  height: 100%;
  border: 1px solid green;
}

<div>
   <p>hello</p>
 </div>

这里的动作有规则解释吗？

Answer 1

你问的规则，

如果声明 display:table-cell，则必须将其嵌套在具有 display:table-row 和 display:table 的元素中。就像真正的table.

The link which says about that usage

table 单元格的解释：

table-cell: 让元素表现得像 <td> 元素

将高度与 table 单元格列一起使用：

Table-cell 列扩展以匹配行中最大列的高度。高度由内容定义，而不是明确的固定高度。

.container {
  display: table;
  height: 500px;
}

.column {
  display: table-cell;
  width: 100px;
}

<div class="container">
    <div class="column">Column 1.</div>
    <div class="column">Column 2 is a bit longer.</div>
    <div class="column">Column 3 is longer with lots of text in it.</div>
</div>

第1栏，第2栏有点长。第 3 列较长，其中有很多文字。

浮动元素的常见解决方法是设置最小高度值。

如果最长内容的长度始终大致相同，则此方法可行，但如果内容的长度变化很大，则不是可行的解决方案。

Here is a reference to this answer

将规则应用于您的答案：

div {
  width: 100px;
  height: 100px;
  display: table;
}
p {
  margin: 0px;
  padding: 0px;
  display: table-cell;
  width: 100%;
  height: 100%;
  border: 1px solid green;
}

<div>
   <p>Test</p>
</div>

Here is a fiddle

Answer 2

带有display: table-cell的p在匿名table行框中呈现，在匿名table框中（§17.2.1 Anonymous table objects），在 div 中（然后成为这个匿名 table 框的包含块）。

默认情况下，table 框不会扩展到其包含块的宽度 (§17.5.2 Table width algorithms: the 'table-layout' property)。这适用于匿名 table 框、HTML table 元素以及任何其他带有 display: table.

的元素

为什么 child 的宽度在显示时没有扩展到 parent 的宽度：table-cell？

Why child's width does not expand into parent's width in display: table-cell?

css

css-tables