table-cell width和height的100%

Question

当你让一个元素的高度设定为百分比高度时，它的维度=父元素的高度×百分比。
请看这里
https://jsfiddle.net/luofeiyu...

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

这个p元素的维度不是 父元素的大小。
为什么？

Answer 1

display: table-cell 就是把元素以<td>一样的形式呈现
而<td>是行内,或者说特殊的行内
行内是什么样？display:inline; 此时，元素<p>hello</p>的宽高只受内部文字影响
要百分比响应父元素的宽高，只能block、inline-block