CSS中的确切间隙是什么

问题描述 投票:4回答:3

因此,我已经阅读了CSS规范,以更好地理解如何在代码中使用样式属性和属性。当前处于Box模型-Collapses Margins,http://www.w3.org/TR/CSS2/box.html#collapsing-margin,我在规格中遇到了这条线。

如果具有间隙的元素的顶部和底部边距为相邻,其边距随着跟随兄弟姐妹,但最终利润不会随着父块的下边距

有人在乎解释以上内容的含义吗?如上面所用,还要在间隙上照射更多的光。非常感谢您在这里的投入。

css css-float margin
3个回答
3
投票

也许像这样看。

假设您有一个左浮动元素。让我们将其称为块F。该块被浮子从流中移出,因此下一个块元素(假设它没有浮出,并调用该块B)在水平和垂直位置与块F完全相同。文本放置在块B中,它开始填充块B,但文本不会与块F重叠。这就是浮点数的作用。

还要假设还有另一个块元素,也没有浮动并调用该块C。(这将是我们的重要元素)。 C块将被放置在B块的正下方。这取决于F和B块的相对高度,可能从F块的底部上方或下方开始。

-在这里停止,并确保您已经清晰地想到了三个块F,B,C的两个图片-

现在,假设我们将clear:left应用于块C。如果块C在块F的底部下方开始,则clear:left无效,并且没有间隙。

如果块C从块F的底部上方开始,则块C向下移动,直到其开始不再位于块F的底部上方。其移动距离称为间隙]。

[上面的描述有些掩饰。块的“开始”是边距框,边框,填充框或内容框的内边缘还是外边缘? “顶部”和“底部”类似。我们在这里不必担心这一点,但是CSS规范将所有内容都固定下来。]

一旦建立间隙或未建立间隙,则可以机械地应用发生边距塌陷的情况。

因此,为回答您的评论问题,只有在应用了除“ none”以外的其他清除属性时,才可以发生清除,但这还不够,实际上必须将块向下移动。因此,如果clear:left规则实际上将块C向下移动,则引用的边距折叠规则仅适用于块C。

最后,请注意,由于历史原因,在某些情况下,可以通过HTML属性而不是直接在CSS中直接应用明确的规则。

我不确定这是否是测试,但是出于该说明的目的,您引用的“清除”一词的确切实例实际上已链接至描述/定义:

http://www.w3.org/TR/CSS2/visuren.html#clearance

除“ none”以外的其他值可能会导致清除。间隙可防止边距塌陷,并充当元素边距顶部上方的间距。用于将元素垂直推过浮子。

块的顶部和底部边距有时被合并(折叠)成单个边距,其大小是各个边距中的最大值(如果相等,则为其中之一),这种行为称为边距折叠。请注意,浮动元素和绝对定位元素的边距永远不会崩溃。

在三种基本情况下发生边际崩溃:

相邻的兄弟姐妹

-相邻兄弟姐妹的边距被折叠(除非需要通过浮子清除后者的兄弟姐妹,否则除外)。

没有内容分隔父子关系-如果没有边框,内边距,内联部分,创建的块格式上下文,或没有间隙来将一个块的边距顶部与其一个或多个后代块的边距顶部分开;或没有边框,填充,内联内容,高度,最小高度或最大高度来将一个块的边距底部与一个或多个后代块的边距底部分开,然后这些边距就会崩溃。折叠后的边距最终出现在父级之外。

空块-如果没有边框,内边距,内联内容,高度或最小高度,以将块的页边距顶部与底部距底部分开,则其顶部和底部页边距将折叠。

一些注意事项:

  • 合并以上情况时,发生更复杂的边距折叠(超过两个边距)。
  • 这些规则甚至适用于零的边距,因此,无论父辈的边距是否为零,后代的边距最终都将在其父级的外部(根据上述规则)。
  • 当涉及负边距时,合计边距的大小是最大正边距和最小(最大负数)负边距之和。
  • [当所有边距均为负数时,合拢边距的大小为最小(最负数)边距。这适用于相邻元素和嵌套元素。

0
投票

我不确定这是否是测试,但是出于该说明的目的,您引用的“清除”一词的确切实例实际上已链接至描述/定义:


0
投票

块的顶部和底部边距有时被合并(折叠)成单个边距,其大小是各个边距中的最大值(如果相等,则为其中之一),这种行为称为边距折叠。请注意,浮动元素和绝对定位元素的边距永远不会崩溃。

© www.soinside.com 2019 - 2024. All rights reserved.