Css 使用框大小计算填充百分比的奇数行为：边框框；

使用fiddle设置测试用例：

我有一个宠物项目，调整了一些

边框框

布局。我看到分层块元素有一种奇怪的（但跨浏览器的一致性）行为

根据示例，有3个div：第一个div具有固定的高度和宽度，它的子div具有100%的高度和宽度，加上两侧的%填充，它的子div具有100%的高度和宽度

正在使用宽度计算垂直填充。这是

边框框

的一些故意的怪癖吗？是否有一个使用css的布局技巧，使其“如我所料”，使用高度来计算垂直填充

我不需要JS解决方案，也不需要其他方法来调整我最小的盒子的大小。我对这种特殊的布局怪癖感兴趣，它为什么会发生，以及是否有一种纯粹、简单的css方法使其“行为化”

编辑 显然，填充百分比是以宽度的百分比计算的，无论您使用的是哪种框大小。作为一名前端开发人员，我以前从未遇到过这种情况。如果有人知道一个好的解决办法，我洗耳恭听

谢谢

，所以这种行为是正确的，应该与您期望的一致

如果你想解释原因，他们实际上没有提供解释，但推测这是因为父母的身高取决于孩子的身高，而孩子的身高会受到填充百分比的影响

编辑：对此稍作扩展，宽度计算不依赖于子对象的长方体模型；如果未指定任何一项，则子项的宽度可以超出父项

span, div {
    display: inline-block;
    border: 1px solid black;
}
span span {
    padding: 50%;
}
<span><span>foon</span></span>
<div><div>foon</div></div>

span，div{
显示：内联块；
边框：1px纯黑；
}
跨距{
填充：50%；
}
丰
丰

因此，这种行为是正确的，应该与您期望的一致

如果你想解释原因，他们实际上没有提供解释，但推测这是因为父母的身高取决于孩子的身高，而孩子的身高会受到填充百分比的影响

编辑：对此稍作扩展，宽度计算不依赖于子对象的长方体模型；如果未指定任何一项，则子项的宽度可以超出父项

span, div {
    display: inline-block;
    border: 1px solid black;
}
span span {
    padding: 50%;
}
<span><span>foon</span></span>
<div><div>foon</div></div>

span，div{
显示：内联块；
边框：1px纯黑；
}
跨距{
填充：50%；
}
丰
丰

---

这似乎是预期的行为，这是一个很好的推测。这似乎是预期的行为，这是一个很好的推测。