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

子元素不应该从200px(父级的设置高度)放置50%,即从顶部100px？

来自W3C规格:

百分比是根据生成的框的包含块的宽度计算的.请注意,对于"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在页面垂直向下堆叠的块中布置内容,因此块的宽度通常完全由其父级的宽度决定.换句话说,您可以计算块的宽度而不必担心该块内部的内容.

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

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

基于容器宽度的垂直边距会破坏该循环依赖性,并且可以布置页面.

例:

这是小提琴.和代码:

HTML

  
 Some Cool content




  MORE TEXT

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

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

因此，您看到的边距顶部等于宽度的50％。