块级元素的折叠宽度高度和边距平均值是多少?
这是什么意思,块级元素的宽度不能折叠,但高度可以?块级元素的折叠宽度高度和边距平均值是多少?
而且可以请你解释一下从W3.org规范这样的文字:
在CSS中,两个或多个框的相邻边缘(这可能会或可能不会是兄弟姐妹)可结合成一个单一的余量。据说这种方式结合在一起的利润率会崩溃,并且由此产生的综合利润率被称为折叠利润率。
这个词的含义崩溃在这里造成了很大的困惑。
A collapsed margin是两个不同元素的边距占用相同空间时实例的名称。
请看下面的例子:
.box {
height: 50px;
width: 50px;
}
.box1 {
background: red;
margin-bottom: 25px;
}
.box2 {
background: blue;
margin-top: 50px;
}
<div class="box box1"></div>
<div class="box box2"></div>
这很难说,但两个箱子之间的空白是唯一50px
。你可能认为它应该是应该是是75px
,因为我已经在顶部框中指定了margin-bottom
的25px
,并且在底部框上指定了50px
的margin-top
。 25 + 50 = 75
,那么为什么空白只有50px?
那么,利润率不能在其中有任何内容;保证金具体表示缺少的内容。考虑到没有内容要显示在保证金中,解析器认为它们也可以合并以优化空间。
'折叠''这个词的出现是因为在技术上同时存在于同一地点的两个不同的“片段”相互“坍塌”。
注意这不发生与margin-left
和margin-right
:
.box {
height: 50px;
width: 50px;
float: left;
}
.box1 {
background: red;
margin-right: 25px;
}
.box2 {
background: blue;
margin-left: 50px;
}
<div class="box box1"></div>
<div class="box box2"></div>
以上的空间确实75px
。这可能是一个让人困惑的概念,但需要注意的是,它只影响纵向利润率。有关折叠边距的更多信息,请参阅CSS Tricks和Mozilla。
同样重要的是需要注意的是,在默认情况下,块级元素占用100%它的父的宽度的,但0%高度的。
下面是一个例子说明这一点:
.parent {
background: blue;
border: 10px solid purple;
height: 50px;
width: 200px;
}
.child {
background: red;
}
<div class="parent">
<div class="child">Text</div>
</div>
在上面的例子中,我指定一个width
和家长一个height
,虽然我不指定对孩子要么。如您所见,子元素继承宽度200px
,但是不是继承了50px
高度。
希望这有助于澄清这一点!
感谢您的解释。请您详细说明相邻的保证金情况。 –
哦等等!我完全错误地解释了这一点。我很抱歉;我现在更新我的答案来纠正这个=] –
我现在已经戏剧性地修改了我的答案,以更好地覆盖这个=] –
请参考以上链接获得这些qoutes以上的链接 – Duannx