1

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

border-box我有一个可以调整一些布局的宠物项目。我看到分层块元素的奇怪（但跨浏览器一致）行为。

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

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

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

编辑 显然，填充百分比计算为宽度的百分比，无论您使用哪种框大小。作为一名前端开发人员，多年来我从未遇到过这种情况。如果有人知道一个好的解决方法，我会全神贯注。

谢谢！

4

1 回答 1

1

这实际上是 CSS 规范的一部分，因此这种行为是正确的，应该与您的期望一致。

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

编辑：稍微扩展一下，宽度计算不依赖于孩子的盒子模型；如果两者都没有指定，孩子的宽度可以超出父母的宽度。

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/

于 2013-03-28T23:16:47.323 回答