html - 为什么 padding 会改变设置了 border-box 的子 div 的高度？

Question

我有以下一段 html

<div style="position: relative; box-sizing: border-box; width: 400px; height: 400px; padding-top: 20px;">
  <div style="position: absolute; height: 80%; background-color: aqua; width: 100%;"></div>
  <div style="height: 80%; background-color: black; width: 100%;"></div>
</div>

我有一个高度为 400px 的父 div 和两个子 div，每个子 div 的高度为 80%。

第一个 div 具有绝对位置，这个具有正确的高度 (400 * 0.8) = 320px 。

第二个 div 大小为 304px，较小。

经过一些试验和错误，我发现 padding-top: 20px在父 div 上导致了这一点。
有人可以向我解释为什么会发生这种情况以及如何使 div 大小相同吗？
这似乎发生在所有主要浏览器中。

Answer 1

来自 the specification :

The position and size of an element's box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element. The containing block of an element is defined as follows:

..

4. If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', in the following way:
   1. In the case that the ancestor is an inline element, the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element. In CSS 2.1, if the inline element is split across multiple lines, the containing block is undefined.
   2. Otherwise, the containing block is formed by the padding edge of the ancestor.

所以position:absolute元素将使用 400px包括 填充

For other elements, if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearest block container ancestor box.

另一个将使用内容框，即 400px - 20px所以你不会有相同的高度

400*0.8 = 320 [positionned element]
(400 - 20)*0.8 = 304 [non-positionned element]

这在某种程度上是合乎逻辑的，因为填充是一种创建空间的方式，因此在考虑非定位元素时它将从计算中删除。这个逻辑对于定位元素是不同的。
举例说明:

.box {
  border:2px solid;
  padding:20px;
  height:300px;
  width:300px;
  box-sizing:border-box;
  position:relative;
}

.box > div:last-child {
   height:100%;
   width:100%;
   background:red;
}

.box > div:first-child {
   position:absolute;
   width:100%;
   height:100%;
   background:rgba(0,255,0,0.5);
}

<div class="box">
  <div></div>
  <div></div>
</div>

说到定位，那就是另一回事了。在一个相关的问题下面，了解如果您不设置 top/left/right/bottom 元素是如何定位的，您将看到填充将在这里发挥作用:
Why aren't my absolutely/fixed-positioned elements located where I expect?

如果不设置 box-sizing:border-box ，逻辑将保持不变，但值会改变。
来自规范相关的默认值content-box

This is the behavior of width and height as specified by CSS2.1. The specified width and height (and respective min/max properties) apply to the width and height respectively of the content box of the element. The padding and border of the element are laid out and drawn outside the specified width and height.

计算将变成

(400 + 20)*0.8 = 336  [positionned element]
400*0.8 = 320 [non-positionned element]

如果您希望它们具有相同的大小，则需要为绝对元素定义不同的高度:

.box {
  height: calc((100% - 20px)*0.8);
}
/* OR */
.box {
  top:20px;
  bottom: 20%;
}

<div style="position: relative; box-sizing: border-box; width: 400px; height: 400px; padding-top: 20px;">
  <div class="box" style="position: absolute; background-color: aqua; width: 100%;"></div>
  <div style="height: 80%; background-color: black; width: 100%;"></div>
</div>

或者不使用position:absolute

.box {
  box-sizing: border-box;
  width: 400px;
  height: 400px;
  padding-top: 20px;
  
  display: grid;
  grid-template-rows: 80%; /* the height here */
}

.box > * {
  grid-area: 1/1; /* make both elements on top of each other */
}

<div class="box">
  <div style="background-color: black;"></div>
  <div style="background-color: aqua;"></div>
</div>