html - 即使将框大小设置为边框框，子元素也无法获得父元素的 100% 的宽度和高度？

Question

编辑：不重复：

使子元素（带填充）为父元素的 100% 宽度和高度

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

我想弄清楚的是，当您使用将border-box填充和/或边框设置为父级的模型时，具有 100% 高度/宽度的子级将仅继承内容框高度父级的 /width，而不是正确的高度/宽度（元素的检查高度/宽度）本身。因为如果您检查我的片段中的父级，您会看到高度/宽度设置为 100 像素。孩子将是80px。那么，为什么 100 像素的高度/宽度的 100% 可能等于 80 像素？这对我来说是违反直觉的，但我认为答案在下面 MDN 引用的粗体部分。

MDN 来源：box-sizing

默认情况下，在 CSS 框模型中，您分配给元素的宽度和高度仅应用于元素的内容框。如果元素有任何边框或填充，然后将其添加到宽度和高度，以达到在屏幕上呈现的框的大小。这意味着当您设置宽度和高度时，您必须调整您提供的值以允许可能添加的任何边框或填充。

box-sizing属性可用于调整此行为：

content-box为您提供默认的 CSS 框大小行为。如果将元素的宽度设置为 100 像素，则元素的内容框将是 100 像素宽，并且任何边框或填充的宽度都将添加到最终渲染的宽度中。

border-box告诉浏览器在您为元素的宽度和高度指定的值中考虑任何边框和填充。如果您将元素的宽度设置为 100 像素，则该 100 像素将包括您添加的任何边框或填充，并且内容框将缩小以吸收额外的宽度。这通常会使调整元素大小变得容易得多。

---

原始问题

我遇到过这样一种情况，即子元素的width和height设置为父元素宽度的 100%，而height. 我正在使用box-sizing: border-box;

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

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

border-box 告诉浏览器在您为元素的宽度和高度指定的值中考虑任何边框和填充。如果您将元素的宽度设置为 100 像素，则该 100 像素将包括您添加的任何边框或填充，并且内容框将缩小以吸收额外的宽度。这通常会使调整元素大小变得容易得多。

所以在下面的代码片段中，我期望孩子会完全覆盖父母，因为它会拥有width并height设置为 100% 的父母。但事实并非如此。孩子得到 100% 的父母的height和width 减去 border和padding。

问题

如果您检查元素（由代码片段呈现），您会看到父元素height和width是 100 像素，而子元素只有 80 像素。它不应该也是 100px，因为它设置为 100% 吗？为什么会发生这种情况？

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>

标签： htmlcss