Html CSS高度设置为百分比，是相对于父内容框还是填充框等

说：

所以我们有一个包含子元素的包含块。子元素的高度为100%或其他百分比

如果包含块设置了高度、填充和边框，子元素高度是否计算为包含块的内容框高度、填充框高度和边框框高度的100%

如果我们更改了容器块的框大小，但也进行了其他更改，使容器块的内容框/填充框/边框框大小不变，那么子元素的大小是否会受到影响

---

编辑：显然，填充框是实验性的，仅由FF支持。

基于

%

的子对象大小确实是根据父对象的大小计算的，并且它考虑了

框大小

请参阅此演示：


.box{
宽度：100px；
高度：100px；
填充：10px；
利润率：10px；
边框：10px纯黑；
背景色：红色；
颜色：白色；
}
.内容框{
框大小：内容框；
}
.边框框{
框大小：边框框；
}
.孩子{
宽度：100%；
身高：100%；
背景颜色：蓝色；
}

内容框


边框框
使用百分比指定元素高度时，该百分比与元素包含块的高度相关。根据某些因素（参见下面的引文），包含块可能由元素的父元素的内容边缘或其填充边缘构成。换句话说，它并不总是与父级的内容边缘相关

更改元素父元素的
框大小
本身不会影响元素的包含块，因此不会更改子元素的大小。然而，在Khalos的代码片段中，父对象的内容边缘发生了变化，因此子对象的大小也相应地发生了变化。在该代码段中，子项的大小更改是因为父项的内容边缘更改，而不是因为父项的
框大小更改。（我知道对其他答案的评论不应出现在此处，但我没有足够多的声誉点在适当的位置发表评论。）

有关元素包含块的定义，请参见。为完整起见，该定义的引用摘录如下：

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

根元素所在的包含块是一个称为初始包含块的矩形。对于连续介质，它具有
视口的尺寸，并定位在画布原点；它是
分页媒体的页面区域。初始值的“方向”属性
包含块与根元素相同

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

如果元素具有“位置：固定”，则在连续介质的情况下，包含块由视口建立，在分页介质的情况下，包含块由页面区域建立
如果元素具有“位置：绝对”，则包含块由最近的祖先以“绝对”、“相对”或“固定”的“位置”按以下方式建立：
在祖先是内联元素的情况下，包含块是围绕为该元素生成的第一个和最后一个内联框的填充框的边界框。在CSS 2.1中，如果内联元素跨多行拆分，则包含的块未定义
否则，包含块由祖先的填充边形成

如果没有这样的祖先，包含块就是初始包含块


因此，在我看来，
height:100%
的孩子的身高始终等于家长内容区的高度。这是正确的吗？是的，这是正确的，它将是内容区的，而不是整个框的。
The percentage is calculated with respect to the height of the generated box's containing block.