为什么 padding 会改变设置了边框框的子 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>

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

• 第一个 div 具有绝对位置，这个具有正确的高度 (400 * 0.8) = 320px。
• 第二个 div 大小是 304px，比较小。

经过反复试验，我发现父 div 上的 padding-top: 20px 导致了这种情况。

有人可以向我解释为什么会发生这种情况以及如何使 div 大小相同吗？

这似乎发生在所有主流浏览器中。

Answer 1

来自the specification：

元素框的位置和大小有时是相对于某个矩形计算的，称为元素的包含块。元素的包含块定义如下：

..

4. 如果元素具有“位置：绝对”，包含块由最近的祖先建立，其“位置”为“绝对”、“相对”或“固定”，如下所示大大地：
   1. 在祖先是内联元素的情况下，包含块是围绕为该元素生成的第一个和最后一个内联框的填充框的边界框。在 CSS 2.1 中，如果内联元素被拆分为多行，则包含块是未定义的。
   2. 否则，包含块由祖先的填充边缘形成。

所以position:absolute 元素将使用包含填充

的400px

对于其他元素，如果元素的位置是“相对”或“静态”，则包含块由最近的块容器祖先框的内容边缘形成。

另一个将使用 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>

---

在定位方面，情况就不同了。下面是一个相关问题，以了解如果您不设置顶部/左侧/右侧/底部，元素是如何定位的，您将看到填充将在这里发挥作用：

Why aren't my absolutely/fixed-positioned elements located where I expect?

---

如果您不设置box-sizing:border-box，逻辑将保持不变，但值会改变。

来自规范相关的默认值content-box

这是 CSS2.1 指定的宽度和高度行为。指定的宽度和高度（以及各自的最小/最大属性）分别应用于元素内容框的宽度和高度。元素的内边距和边框在指定的宽度和高度之外进行布局和绘制。

计算会变成

(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>