MDN 说：
The percentage is calculated with respect to the height of the generated box's containing block.
所以我们有一个包含子元素的包含块。子元素具有height: 100% 或其他百分比。
如果包含块设置了高度、内边距和边框，子元素高度是否计算为包含块的内容框高度、内边距框高度、边框高度的 100%？
如果我们改变了容器块的box-sizing，但也做了其他的改变，使得容器块的content-box/padding-box/border-box的尺寸不变，那么子元素的尺寸是否会受到影响？
编辑：显然 padding-box 是实验性的，仅受 FF 支持。
【问题讨论】：
基于% 的子级大小确实是相对于父级的大小计算的，并且确实考虑了box-sizing。
看这个演示：
.box {
width: 100px;
height: 100px;
padding: 10px;
margin: 10px;
border: 10px solid black;
background-color: red;
color: white;
}
.content-box {
box-sizing: content-box;
}
.border-box {
box-sizing: border-box;
}
.child {
width: 100%;
height: 100%;
background-color: blue;
}<body>
<div class="box content-box">
<div class="child">Content Box</div>
</div>
<br/>
<div class="box border-box">
<div class="child">Border Box</div>
</div>
</body>【讨论】：
height: 100% 的孩子的高度总是等于父母内容区域的高度。这是正确的吗？
当使用百分比来指定元素的高度时，该百分比与元素的包含块的高度相关。根据某些因素（见下面的引用），包含块可能由元素的父级内容边缘或其填充边缘形成。换句话说，它确实不总是与父级的内容边缘相关。
改变元素父元素的box-sizing 本身不会影响元素的包含块，因此它不会改变子元素的大小。然而，在 Khalos 的代码 sn-p 中，父级的内容边缘发生了变化，因此子级的大小也相应发生了变化。在该代码 sn-p 中，孩子的大小发生了变化因为父母的内容边缘发生了变化，而不是因为父母的 box-sizing 发生了变化。 （我知道其他答案的 cmets 不应出现在这里，但我没有足够多的声誉点来在适当的位置对其进行评论。）
关于元素的包含块的定义，请参见this part of the W3C specification。为完整起见，引用该定义的摘录如下：
元素框的位置和大小有时是相对于某个矩形计算的，称为元素的包含块。元素的包含块定义如下：
根元素所在的包含块是一个称为初始包含块的矩形。对于连续媒体，它具有 视口的尺寸并锚定在画布原点；它是 分页媒体的页面区域。初始的“方向”属性 包含块与根元素相同。
对于其他元素，如果元素的位置是“相对”或“静态”，则包含块由最近的块容器祖先框的内容边缘形成。
- 如果元素具有“位置：固定”，则包含块在连续媒体的情况下由视口建立，在分页媒体的情况下由页面区域建立。
- 如果元素具有“位置：绝对”，则包含块由最近的祖先以“绝对”、“相对”或“固定”的“位置”建立，方式如下：
- 在祖先是内联元素的情况下，包含块是围绕为该元素生成的第一个和最后一个内联框的填充框的边界框。在 CSS 2.1 中，如果内联元素被拆分为多行，则包含块是未定义的。
- 否则，包含块由祖先的填充边缘形成。
如果没有这样的祖先，则包含块是初始包含块。
...
【讨论】：