外边距问题及解决方法

#### 1、兄弟关系外间距塌陷问题


```html

兄弟关系外间距塌陷问题

        现象：元素呈并列关系，在垂直方向相邻的margin外间距相遇，会出现叠加现象；

        两个值一样大，取当前值

        两个值不同，取较大值

        原因：并列关系的两个元素共用了一个外间距区域

        解决办法：

        分别给这两个元素套一个父元素，并为父元素设置overflow:'hidden'

         .box1 {

            width: 100px;

            height: 100px;

            background-color: yellow;

            margin-bottom: 50px;

        }

        .box2 {

            width: 100px;

            height: 100px;

            background-color: red;

            margin-top: 100px;

 

        }

        .father1,

        .father2 {

            overflow: hidden;

        }

     <div class="father1">

        <div class="box1"></div>

    </div>

    <div class="father2">

        <div class="box2"></div>

    </div>

```

#### 2、父子关系外间距塌陷


```html

父子关系外间距塌陷

       现象：

       1.元素嵌套关系，子元素的margin-top值会叠加给父元素；

       2.如果父元素也有margin-top值，会与子元素的margin-top值合并，取两者较大值；

       原因：

       父元素和子元素公用一个上外边距区域

       解决方法：

       1.为父元素设置上边框或者上填充

       2.为父元素设置overflo：hidden；

       3.转换思路，巧用padding，规避margin

        .father {

            width: 200px;

            height: 200px;

            background-color: tomato;

            margin-top: 100px;

            /* border-top: 2px solid royalblue;

            padding-top: 1px; */

            overflow: hidden;

        }

        .son {

            width: 100px;

            height: 100px;

            background: blue;

            margin-top: 50px;

        }

        .father1 {

            width: 200px;

            height: 200px;

            background-color: purple;

            padding-top: 20px;

        }

        .son1 {

            width: 100px;

            height: 100px;

            background: pink;

            /* padding-top: 10px; */

        }

   <div class="father">

        <div class="son"></div>

    </div>

    <hr>

    <div class="father1">

        <div class="son1"></div>

    </div>

```

## 二、overflow详解

概述：溢出元素内容区的内容会如何处理

## 取值

  overflow: visible;溢出显示，默认值

  overflow: hidden;溢出隐藏

  overflow: scroll;溢出显示滚动条，横向和纵向滚动条都显示

  overflow: auto;自动，内容溢出时，显示滚动条

​     overflow-x 只包括水平方向。

​    overflow-y 只包括垂直方向

```html

 body{

            /* overflow:hidden ; */

            /* overflow-x 只包括水平方向。

                overflow-y 只包括垂直方向。 */

            overflow-x: hidden;

            overflow-x: visible;

            overflow-x: scroll;

            overflow-x: auto;

            overflow-y: hidden;

            overflow-y: visible;

            overflow-y: scroll;

            overflow-y: auto;

        }

<img src="./images/yk.png" alt="">

```