html - margin-top百分比是如何计算的？

Question

我知道这应该很简单，但是谁能告诉我为什么当 margin-top: 50% 应用到子项时，下面的子框会溢出其父项的容器。 margin-top 百分比是如何计算的？

.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 :

The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.

根据包含 block 的宽度设置垂直边距有两个很好的理由:

水平和垂直一致性

当然，有一个速记属性可以让您指定 block 所有四个边的边距:

margin: 10%;

这扩展为:

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

现在，如果你写了以上任何一个，你可能希望 block 的所有四个边的边距大小相等，不是吗？但是如果 margin-left 和 margin-right 是基于容器的宽度，而 margin-top 和 margin-bottom 是基于容器的高度，那么它们通常是不同的!

避免循环依赖

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

block 的高度是另一回事。通常，高度取决于其内容的组合高度。改变内容的高度，也就改变了 block 的高度。看到问题了吗？

要获取内容的高度，您需要知道应用于它的顶部和底部边距。如果这些边距取决于父 block 的高度，你就有麻烦了，因为你无法在不知道另一个的情况下计算出一个!

基于容器宽度的垂直边距打破了循环依赖，并使页面布局成为可能。

示例:

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;
};