css - 为什么子级的宽度在显示时没有扩展到父级的宽度: 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>

现在，这里的子元素 p 不会扩展到其父元素的宽度和 height: 100px ， 为什么？ 如果display: table-cell改为display: table或其他，例如block , 子元素<p>这里确实扩展到其'父级的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 的 p 在匿名表格行框中呈现，在匿名表格框 ( §17.2.1 Anonymous table objects ) 中， div(然后成为该匿名表格框的包含 block )。

默认情况下，表格框不会扩展到其包含 block 的宽度 ( §17.5.2 Table width algorithms: the 'table-layout' property )。对于匿名表格框、HTML table 元素以及具有 display: table 的任何其他元素来说都是如此。