Html 利润最高百分比是如何计算的?
我知道这应该很简单,但有谁能告诉我,当Html 利润最高百分比是如何计算的?,html,css,Html,Css,我知道这应该很简单,但有谁能告诉我,当margintop:50%应用于子对象时,为什么下面的子框会溢出父对象的容器。利润最高百分比是如何计算的 .container{ 背景:浅蓝色; 填充:10px; 高度:200px; } p{ 显示:块; 边框:1px纯红; 利润率最高:50%; } 一些很酷的内容 基于百分比的边距是使用父容器的宽度计算的,无论边距在哪一侧 因此,您将看到边距顶部等于宽度的50%。From: 百分比是根据生成的框的包含块的宽度计算的。请注意,“页边距顶部”和“页边距底
margintop:50%
应用于子对象时,为什么下面的子框会溢出父对象的容器。利润最高百分比是如何计算的
.container{
背景:浅蓝色;
填充:10px;
高度:200px;
}
p{
显示:块;
边框:1px纯红;
利润率最高:50%;
}
一些很酷的内容
基于百分比的边距是使用父容器的宽度计算的,无论边距在哪一侧
因此,您将看到边距顶部等于宽度的50%。From:
百分比是根据生成的框的包含块的宽度计算的。请注意,“页边距顶部”和“页边距底部”也是如此。如果包含块的宽度取决于此元素,则结果布局在CSS 2.1中未定义
根据包含块的宽度设置垂直边距有两个很好的理由:
水平和垂直一致性
当然,有一个速记属性,可用于指定块的所有四边的边距:
margin: 10%;
这扩展到:
margin-top: 10%;
margin-right: 10%;
margin-bottom: 10%;
margin-left: 10%;
现在,如果你写了上面的任何一个,你可能会期望块的四个边上的边距大小相等,不是吗?但是如果左边空白和右边空白是基于容器的宽度,右边空白顶部和底部空白是基于容器的高度,那么它们通常是不同的
避免循环依赖
CSS以垂直堆叠在页面下方的块来布局内容,因此块的宽度通常完全由其父块的宽度决定。换句话说,您可以计算块的宽度,而不必担心块内的内容
一块砖的高度是另一回事。通常,高度取决于其内容物的组合高度。更改内容的高度,即更改块的高度。看到问题了吗
要获得内容的高度,您需要知道应用于内容的上下边距。如果这些边距取决于父块的高度,那么您就有麻烦了,因为您无法在不知道另一个的情况下计算其中一个
基于容器宽度的垂直边距打破了这种循环依赖关系,使页面布局成为可能
示例:
。以及守则:
HTML
<div class="container">
<p id="element"> Some Cool content</p>
</div>
<p>
MORE TEXT
</p>
JS
.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;
};
如果您想要设置高度百分比,请尝试“vh”
{
margin-top: 5vh; /* should be 5% of vertical container */
}
讨论这是因为利润
利润最高:50%代码>我知道这是因为利润率最高:50%
但为什么?子元素是否应该放置在距离200px(在父元素上设置高度)50%的位置,即距离顶部100px?显示:内联块;伙计们,我在找一个解释。所有这些修复都可以由我自己完成,但我需要解释一下为什么保证金上限:50%
不是根据母公司设定的高度计算的。哦,真的,这对我来说是个新闻。关于为什么会有这种行为,有什么合乎逻辑的解释吗?也许有一个很好的例子。所以确实有一个解决方案,为什么以前没有人提到过?新标准?