即使将box-sizing设置为border-box，子元素也不会获得父元素的宽度和高度的100％？

Question

编辑：不重复：

Make child element (with padding) 100% width and height of parent

在这个问题上，这个人需要box-sizing: border-box模型。我已经在代码段中找到了该模型。

我想包扎的事实是，当您使用border-box模型并将填充和/或边框设置为父对象时，孩子的身高/宽度为100％将仅继承父级的内容框高度/宽度，而不继承其本身的正确高度/宽度（元素的检查高度/宽度）。因为如果您在我的代码段中检查父项，则会看到高度/宽度设置为100px。孩子将是80px。那么，为什么100px的高度/宽度的100％等于80px？这对我来说是违反直觉的，但是我认为答案是在下面的MDN引号的粗体部分。

MDN Source: box-sizing

  

在CSS框模型中，默认情况下，您分配给   元素仅应用于元素的内容框。如果元素   有任何边框或填充，然后将其添加到宽度和高度   得出在屏幕上渲染的框的大小。这个   表示在设置宽度和高度时，必须调整该值   您会考虑允许添加任何边框或填充。

     

框大小属性可用于调整此行为：

     

内容框为您提供了默认的CSS框大小调整行为。如果您设定   元素的宽度为100像素，则元素的内容框将   宽度为100像素，任何边框或填充的宽度为   添加到最终渲染的宽度。

     

边框告诉浏览器   为您指定的边框和边框填充值   元素的宽度和高度。如果将元素的宽度设置为100   像素，这100像素将包括您添加的任何边框或填充，   和内容框将缩小以吸收额外的宽度。   通常可以大大简化元素的大小。

---

原始问题

我曾经遇到过这样一个情况，子元素的width和height设置为父元素的宽度和height的100％。我正在使用box-sizing: border-box;

有人可以解释为什么会这样吗？

From MDN Docs on box-sizing，我们得到了：

  

border-box告诉浏览器要考虑任何边框和填充   您为元素的宽度和高度指定的值。如果您设定   元素的宽度为100像素，这100像素将包括   边框或填充，内容框将缩小以吸收   那多余的宽度。这通常使尺寸更容易   元素。

因此，在以下代码段中，我期望孩子将完全覆盖父级，因为它将width和height设置为父级的100％。但事实并非如此。孩子得到父母的height和width的100％减 border和padding。

问题

如果您检查元素（由代码段渲染），则会看到父级height和width为100px，子级仅为80px。因为将其设置为100％，也不应该也是100px吗？为什么会这样？

100％的高度仅与内容框有关？

const parent = document.getElementById('parentDiv');
const child = document.getElementById('childDiv');

const parentStyle = window.getComputedStyle(parent);
const childStyle = window.getComputedStyle(child);

document.getElementById('description1').innerHTML = 'The parent height is: ' + parentStyle.height;
document.getElementById('description2').innerHTML = 'The child height is: ' + childStyle.height;

document.getElementById('description3').innerHTML = 'The parent width is: ' + parentStyle.width;
document.getElementById('description4').innerHTML = 'The child width is: ' + childStyle.width;

* {
  margin: 0;
  padding: 0;
}

div {
 box-sizing: border-box;
}

#parentDiv {
  border: 5px dotted black;
  background-color: red;
  width: 100px;
  height: 100px;
  padding: 5px;
  
}

#childDiv {
  background-color:blue;
  width: 100%;
  height: 100%;
  border: 5px dotted green;
}

<div id="parentDiv">
  <div id="childDiv"></div>
</div>
<h3>Height</h3>
<div id="description1"></div>
<div id="description2"></div>
<h3>Width</h3>
<div id="description3"></div>
<div id="description4"></div>