要开始[评论]系列,没有办法。一些理论知识仍然需要它。如果您知道,您会使用它,但是那个人会要求您清楚地回答。
关于折叠的边距转化为外部距离崩溃或折叠,有些人提到我个人更喜欢折叠。这很容易理解。您有外侧的下侧。我有上边缘和外边界,两侧靠近折叠。它崩溃了吗?有崩溃吗?
很难说什么,只要说个人趋势称为“外距离折叠”,后来它变成了外部距离折叠的余量。
上边界和外边框(边缘顶部)和下部外边框(边缘底)有时合并(折叠)到一个边界,其大小是单个边界的最大值(或者如果它们相等,只有一个其中)此行为称为外距离折叠。
例如,两个相邻的div元素,距离底部的外部距离为50px,而DIV设置顶部的距离顶部的外部距离为70px,实际上是两个相邻的DIVS实际DIV。外部距离为70px,而不是50px。这是外部距离折叠的现象,一侧的外距离折叠。
以下是两个词干比较图表
外部距离折叠可能会发生普通的两个相邻元素。后一个元素没有使用清晰的浮动来删除浮动。
例如,以下两个元素将发生在外部距离中。它们的实际外部距离为70px。
以下是Mozilla的翻译说明。可以看出,父子元素的外距离折叠的条件很复杂。
如果没有边界边框,内侧距离填充,线的内容,并且没有创建块级格式的上下文或清除浮动以分离元素块的上边界,边距顶部和其一个或多个元素的上边界之间的一个或多个上边界,边缘顶端;或没有边界,内部边缘,内部内容,高度高度,最小高度最小高度或最大最大最大高点可以分离一个元素块的下部边界边缘底部,下边界边缘底部,父块元素和内部团聚元素的外部边框将重叠,重叠部分最终将溢出到父块元素。
以下是父元素及其子元素中边缘顶部的折叠。实际的外部距离不是两个边缘顶部的总和,而是较大的值为70px。
与父子元素的场景类似,边缘底也将具有外距离折叠。如下所示,父元素的边缘底部及其子元素具有折叠,实际的外距离为70px。
当边缘顶直接连接到边距底部时,边界上边界上边界的边界将发生在块元素中,而无需设置边框,填充内侧距离,高度,最小高度min高度,最大高度最大高度,内容设置为内联或添加透明固定。
如下所示,它是一个空元素折叠的示例。最初位于第二行中的空元素从上述元素设置为100px,从较低元素设置了150px。100 + 0(元素的第二行为0) + 150 = 200px,但实际上是150px。这意味着这意味着该空元素本身的边距具有折叠,仅拿出150px的大值,然后将其他100px折叠并溢出到第三行元素。
①内部块元件内联块没有外部距离折叠,包括相同的级别和嵌套元素。
②浮动浮子元素不会从外部距离折叠中发生,包括相同的水平和嵌套元素。
③绝对定位元件绝对不具有外间距折叠,包括相同的级别和嵌套元素。
④BFC的元素不会在其子元素之外折叠。
①折叠现象发生在块级别的元素上,是顶部和底部的外部距离,因此与线路中的元素无关。除了折叠。
②折叠外距离可能会产生父元件的现象,使父元素溢出。不管父元件的外侧是否为0。
③当发生相邻元素和嵌套元素之间的外部距离时,情况将变得更加复杂。
④将他折叠起来,将外部距离设置为附近的两个元素,仅将顶部或底部设置在一侧,这可能是一个好习惯。
尽管我们应该努力工作的方向是避免产生外部距离折叠,而不是结算折叠的值。一旦生成折叠现象,我将更改代码,以免他在不折叠的情况下产生折叠值。
但是,由于我了解了这一点,因此我仍然研究折叠的价值,通常是计算出来的:
例如,-50px和-70px被折叠,因此折叠值为70px,因为-70的绝对值是最大的。当然,如果-50px和-50px目前的绝对值为50px,因此您只有一个选择50px。
例如,如果折叠50px和70px,则折叠值为70px,因为70的绝对值是最大的。当然,如果50px和50px,最绝对的值是50px。
例如,折叠了70px,-50px和20px,因此边界范围为70px +(-50px)= 20px。