Question

我知道这应该是直截了当的，但任何人都可以告诉我为什么当margin-top: 50%应用于孩子时，下面的子框会溢出父母的容器。如何计算保证金最高百分比？

.container {  
  background: lightblue; 
  padding: 10px; 
  height: 200px;
}

p { 
  display: block; 
  border:1px solid red;
  margin-top:50%;
}

<div class="container">
<p> Some Cool content</p>
 
</div>

子元素不应该从200px（父级的设置高度）放置50％，即从顶部100px？

Answer 1

来自W3C Spec：

百分比是根据生成的框的包含块的宽度计算的。请注意，对于“margin-top”和“margin-bottom”也是如此。如果包含块的宽度取决于此元素，则在CSS 2.1中未定义结果布局。

有两个很好的理由将垂直边距基于包含块的宽度：

横向和纵向一致性

当然，还有一个简写属性，可以指定块的所有四边的边距：

margin: 10%;

这扩展为：

margin-top: 10%;
margin-right: 10%;
margin-bottom: 10%;
margin-left: 10%;

现在，如果你写了上面的任何一个，你可能会认为块的所有四边的边距都是相同的大小，不是吗？但是如果margin-left和margin-right是基于容器的宽度，margin-top和margin-bottom是基于它的高度，那么它们通常是不同的！

避免循环依赖

CSS在页面垂直向下堆叠的块中布置内容，因此块的宽度通常完全由其父级的宽度决定。换句话说，您可以计算块的宽度，而不必担心该块内的内容。

块的高度是另一回事。通常，高度取决于其内容的组合高度。更改内容的高度，然后更改块的高度。看到问题了？

要获取内容的高度，您需要知道应用于它的顶部和底部边距。如果这些边距取决于父块的高度，那么你就会遇到麻烦，因为你不知道另一个就不能计算它！

基于容器宽度的垂直边距打破了循环依赖关系，并且可以布局页面。

示例：

Here is the fiddle。代码：

<强> HTML

<div class="container"> <p id="element"> Some Cool content</p> </div> <p> MORE TEXT </p>

<强> CSS

.container { background: lightblue; padding: 10px; height: 100px; width: 500px; } p { display: block; border: 1px solid red; margin-top: 50%; }

<强> JS

window.onload = function(evt) { var element = document.getElementById("element"), style = element.currentStyle || window.getComputedStyle(element); element.textContent = "the margin-top is : " + style.marginTop; };

Answer 2

基于百分比的边距是使用父容器的 width 计算的，无论边距在哪一侧。

所以你看到的边距等于宽度的50％。

Answer 3

如果要设置高度百分比，请尝试“ vh”。

{
   margin-top: 5vh; /* should be 5% of vertical container */
}

讨论过here

如何计算保证金最高百分比？

3 个答案: