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

  • Z时代
  • 2024-01-10
  • 分类：问答

我知道这应该很简单，但是任何人都可以告诉我，为什么在将a 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>

子元素不应放置在200像素（父元素的高度）的50％处，即距顶部100像素的位置吗？

回答：

相对于生成的框的包含块的宽度计算百分比。请注意，“ margin-top”和“ margin-

bottom”也是如此。如果包含块的宽度取决于此元素，则结果布局在CSS 2.1中未定义。

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

当然，有一个速记属性，可让您为块的所有四个边指定边距：

margin: 10%;

扩展为：

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

现在，如果您编写了上面的任何一篇，您可能希望该块的所有四个边的边距都相等，不是吗？但是，如果左边距的边距和右边距的边距是基于容器的宽度，而margin-

top和margin-bottom是基于容器的高度，则它们通常是不同的！

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

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

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

在容器的宽度上放置垂直边距可以打破这种圆形依赖性，并可以对页面进行布局。

这是小提琴。和代码：

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

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

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

以上是 如何计算保证金最高百分比？ 的全部内容， 来源链接： utcz.com/qa/407401.html

回到顶部