Question

用小提琴设置测试用例： http://jsfiddle.net/5M7X7/2/

我有一个宠物项目，展示了一些border-box布局。我看到了一个奇怪的（但是跨浏览器一致）行为与分层块元素。

根据示例，有3个div：第一个具有固定的高度和宽度，其子具有100％的高度和宽度，以及两侧的％填充，并且其子高度和宽度为100％。

使用宽度计算垂直填充。这是border-box的故意怪癖吗？是否有使用css的布局技巧使其“按照我的预期”运行，使用高度来计算垂直填充？

我不需要JS解决方法，也不需要用不同的方法来调整我最小的盒子。我对这个特殊的布局怪癖感兴趣，为什么会发生这种情况，如果有一种纯粹的，简单的css方式让它“行为”。

修改显然，填充百分比计算为宽度的百分比，无论您使用哪个大小的大小。作为一名前端开发人员，我以前从未遇到过这种情况。如果有人知道一个好的解决方法，我会全力以赴。

谢谢！

Answer 1

This is actually part of the CSS spec，所以这种行为是正确的，应该符合您的预期。

如果您想要解释为什么，他们实际上并不提供一个，但推测是因为父高度取决于子高度，子高度会受到填充百分比的影响

编辑：要稍微扩展一下，宽度计算不取决于孩子的盒子模型;如果两者都没有指定，则子项的宽度可以从父项中增长。

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

http://jsfiddle.net/XHDEL/

使用box-sizing计算百分比填充的奇怪行为：border-box;

1 个答案: