0

w3c 规范指出

% 指定包含元素宽度百分比的边距

我想知道这是否也适用于垂直边距。最初我认为它没有，但我有一个使用绝对位置的容器 div 和一个使用静态位置的包含 div。包含的 div 的垂直边距正好是宽度 html而不是容器 div 的垂直边距，除非我也将包含的 div 的位置更改为绝对。因此，我想知道边距是否受文档布局的影响，以及它是否只占用包含元素的宽度。

更新：

改变 div2 的位置会改变大小。

CSS：

body {
  height:100%;
}

div {
}

#div1
{
  height: 50%;
  background: #333;
  padding:1px;
}

#div2
{
background-color:#000;
height:50%;
//position:static;
position:absolute;
margin:25%;
}

HTML： <div id="div1"><div id ="div2">this</div> </div>

4

4 回答 4

2

在 CSS 中，margins 的百分比值（垂直和水平边距——以及padding百分比值）总是相对于元素的包含框的宽度计算。作为参考，您可以查看CSS2.1规范中的这一段：little link。

我希望这有帮助！

于 2012-08-26T19:30:21.123 回答
0

是的，尽管看起来有悖常理，但垂直百分比边距是相对于包含元素的宽度，而不是高度。

于 2012-08-26T19:29:48.877 回答
0

是的。起初可能看起来很奇怪，但它有两个合理的原因：

  1. 如果您为水平和垂直边距提供相同的百分比，它会使其更像您可能想要的。
  2. 如果内容在元素内流动，并且容器随之扩展，那么垂直边距取决于垂直大小将使其依赖于某些东西，而后者又取决于垂直边距的大小！
于 2012-08-26T19:42:01.607 回答
0

CSS 2.1 规范说：margin “百分比：指包含块的宽度”（块，而不是元素）。包含块的定义有特殊的规则，但是绝对定位的容器仍然（通过它的边缘）为静态定位的子定义包含块，我的测试符合这一点。如果您的测试另有建议，请发布您的示例代码。

于 2012-08-26T19:44:31.853 回答