如何计算保证金最高百分比？ [英] How is the margin-top percentage calculated?

问题描述

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

.container {background：lightblue;填充：10px; height：200px;} p {display：block;边框：1px纯红色; margin-top：50％;}

< div class = 容器 >< p为H.一些酷的内容< / p> < / div>

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

解决方案

From W3C规范：

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

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

水平和垂直一致性

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

  margin： 10％; 
  

这扩展为：

  margin-top：10％; 
保证金：10％; 
 margin-bottom：10％; 
保证金余额：10％; 
  

现在，如果您写了上述任何一种，您可能会预期所有四边的边距块的大小相等，不是吗？但是，如果保证金余量和保证金的权利是基于容器的宽度，并且保证金顶部和底部保证金是基于其高度，那么他们通常会不同！

避免循环依赖

CSS将垂直堆叠在页面中的块放入内容中，因此块的宽度通常完全取决于其父母的宽度。换句话说，你可以计算块的宽度，而不用担心块内部是什么。

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

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

容器的宽度可以打破循环依赖关系，并且可以布置页面。

示例：

这是小提琴。和代码：

HTML

 < div class =container> 
< p id =element>一些酷的内容< / p> 
 
< / div> 
 
< p> 
更多文字
< / p> 
  

CSS

  .container {
 background：lightblue; 
 padding：10px; 
 height：100px; 
 width：500px; 
} 
 
 p {
 display：block; 
 border：1px纯红色; 
 margin-top：50％; 
} 
  

JS

  window.onload = function（evt）{
 
 var element = document.getElementById（element），
 style = element.currentStyle || window.getComputedStyle（元件）; 
 
 element.textContent =margin-top is：+ style.marginTop; 
}; 
  

I know this should be straightforward, but can anybody tell me why the child boxes in the following overflow their parent's container when a margin-top: 50% is applied to the child. How is the margin-top percentage calculated?

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

Shouldn't the child element be placed 50% from 200px (set height on parent), i.e 100px from top?

解决方案

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

There are two good reasons to base vertical margins on the width of the containing block:

Horizontal and Vertical Consistency

There is, of course, a shorthand property that lets you specify the margin for all four sides of a block:

margin: 10%;

This expands to:

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

Now, if you wrote either of the above, you’d probably expect the margins on all four sides of the block to be of equal size, wouldn’t you? But if margin-left and margin-right were based on the width of the container, and margin-top and margin-bottom were based on its height, then they’d usually be different!

Avoiding Circular Dependency

CSS lays out content in blocks stacked vertically down the page, so the width of a block is usually dictated entirely by the width of its parent. In other words, you can calculate the width of a block without worrying about what’s inside that block.

The height of a block is a different matter. Usually, the height depends on the combined height of its contents. Change the height of the content, and you change the height of the block. See the problem?

To get the height of the content, you need to know the top and bottom margins that are applied to it. And if those margins depend on the height of the parent block, you’re in trouble, because you can’t calculate one without knowing the other!

Basing vertical margins on the width of the container breaks that circular dependency, and makes it possible to lay out the page.

Example:

Here is the fiddle. And the code:

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

这篇关于如何计算保证金最高百分比？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！