简介常用标签FLEX布局margin 塌陷/合并CSS2.0 BFC音视频播放相关iframe问题汇总相关文档汇总

在标准文档流中,垂直方向的margin会出现叠加现象,大的margin值会覆盖小的margin值。

例如下方的例子:

<style>
    .box {
        width: 300px;
        height: 80px;
    }

    .blue {
        background-color: #00a1d6;
    }

    .green {
        background-color: #68C23A;
    }
</style>
<div class="box blue" style="margin-bottom: 48px">A</div>
<div class="box green" style="margin-top: 32px">B</div>

<div class="box blue">C</div>
<div class="box green" style="margin-top: 8px">
    <div class="box" style="margin-top: 48px">D</div>
</div>

image.png

上图可以看出,A、B之间发生了兄弟关系的margin塌陷,A、B之间的间距为48px,而非80px(A、B的高度都是设置的80px,可以用来对比,明显看出间距小于其自身高度);

D与D的父元素发生了父子关系的margin塌陷,D并没有距离父元素顶部48px,而是与父元素的8px发生了叠加,从而导致D的父元素与C的间距叠加取最大值变成了48px;

原因

让我们先看看CSS1.0的规范上是怎么解释这个问题的,参考文档:https://www.w3.org/TR/CSS1/#vertical-formatting

The width of the margin on non-floating block-level elements specifies the minimum distance to the edges of surrounding boxes. Two or more adjoining vertical margins (i.e., with no border, padding or content between them) are collapsed to use the maximum of the margin values. In most cases, after collapsing the vertical margins the result is visually more pleasing and closer to what the designer expects. In the example above, the margins between the two 'LI' elements are collapsed by using the maximum of the first LI element's 'margin-bottom' and the second LI element's 'margin-top'. Similarly, if the padding between the 'UL' and the first 'LI' element (the "E" constant) had been zero, the margins of the UL and first LI elements would have been collapsed.

可以从CSS1.0的规范上看到,这个是故意这样设计的,这也就是为啥水平方向不会塌陷,在大多数情况下,这样做视觉上看起来更舒服,同时也更符合设计师的期望(实际上亦是如此,只要我们遵循一套规范,这个问题完全不会影响我们的开发)

解决办法

对于兄弟关系的元素标签,建议一律遵循只设置上边距的规范(非强制,但推荐),原因是:

我们期望,标签之间互不影响,即当前存在的标签不应当影响后续可能存在的标签特殊情况另外,一般不会有这么鹅心的视觉会这么出稿子~

当然我们可以通过添加overflow:hidden;来解决这个问题。

对于父子关系的标签,我们还可以通过脱离标准文档流来解决这个问题(一般不用),以及:

推荐使用前2种方式,后3种一般不常用,但是有的情况也可以用,并且更方便,视具体情况使用~