css拓展--盒子外边距塌陷/合并问题及其解决方法

目录  

        什么叫做外边距塌陷

        如何解决外边距塌陷

        什么叫做外边距合并

        如何解决外边距合并

---

什么叫做外边距塌陷

        当两个嵌套关系块级元素，若父元素设置上外边距或者没有设置上外边距（margin-top），子元素设置上外边距时，两个上外边距会发生合并，且值为相对较大的上外边距值。

        示例：

页面渲染效果： 

         我们所希望的是父盒子与页面顶部距离为50px，子盒子与父盒子顶部距离为100px。然而实际设置效果是：给父盒子设置的上外边距没有效果，而子盒子也没有和父盒子顶部产生距离，子盒子随着父盒子距页面顶部下降100px，造成父子元素之间的高度塌陷。

如何解决外边距塌陷

1.为父元素设置外边框（border）或者内边距（padding）【不推荐使用】

    .box1{   /*父盒子*/
        width: 200px;
        height: 200px;
        background-color: aqua;
        margin-top: 50px;
        border: 1px solid;     /*添加外边框border*/
        /* padding: 1px; */    /*添加内边距padding*/
    }

优点：便捷 缺点：border、padding会撑大盒子 

故一般不推荐使用此种方法

2.触发BFC   【推荐使用】

BFC：块级格式化上下文。其目的是形成一个独立空间，使空间中子元素不影响到独立空间外的布局。

解决方案：

        ①父/子元素设置浮动属性：float≠none

        ②父/子元素设置定位属性position=absolute/fixed

        ③父元素设置overflow=auto/hidden/scroll

                auto溢出隐藏，溢出显示的需求不能做

                hidd溢出显示滚动条，溢出显示的需求不能做

                scroll默认显示滚动条，影响美观，一般不使用

        ④父元素设置显示属性dispaly=inline-block

                inline-block 元素会占据一行而且可以调整宽高很适合将这些元素排列在一行

什么叫做外边距合并

        当两个兄弟元素，给在上的元素设置下外边距（margin-bottom），给在下的元素设置上外边距（margin-top），两个元素之间距离不等于这两个外边距之和，而是等于值更大的外边距

        示例：

页面渲染效果：

        我们所希望的是两个盒子间距为第一个盒子下外边距与第二个盒子上外边距之和，也就是150px，但实际效果是两个盒子间距为值更大的边距距离100px，边距发生了合并。 

如何解决外边距合并

1.只设置其中一个元素的外边距margin值   【推荐使用】

2.给每个元素添加父元素，然后触发BFC规则   【不推荐使用】

        示例：

        添加父元素改变了html的搭配结构，故不推荐使用