CSS——margin

maigin连写：

Margin: 20px 30px:   上下20px  左右30px

Margin: 20px  30px  40px:    上20px  左右30px   下  40px

Margin: 20px  30px   40px  50px: 上20px   右30px   下40px  左50px

垂直方向外边距合并:

两个盒子垂直一个设置上外边距，一个设置下外边距，取的设置较大的值。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .box1{
            200px;
            height:100px;
            background-color:orange;
            margin-bottom:20px;
        }
        .box2{
            200px;
            height:100px;
            background-color:gray;
            margin-top:10px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

注释：上下两个盒子最后的距离不是30px，而是其中设值最大的20px。

嵌套的盒子外边距塌陷：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .father{
            /*overflow:hidden;*/
            400px;
            height:400px;
            background-color:gray;
        }
        .son{
            50px;
            height:50px;
            background-color:red;
            margin-top:20px;
        }
        
    </style>
</head>
<body>
    <div class="father"> 
        <div class="son"></div>
    </div>
</body>
</html>

上面嵌套盒子设置了margin-top:20px，随着发生了父盒子也往下移动了20px。

解决办法是：

1 、给父盒子设置边框（因为当父盒子没有边框的时候，子盒子找外边距的时候会将浏览器作为参照的对象）

2、给父盒子overflow:hidden; bfc 格式化上下文

百分比继承：

margin-top：20%，这个继承关系是继承了父盒子的宽度，这很奇葩

<style>
    .parent {
        width: 200px;
        height: 100px;
        border: 1px solid #000;
    }

    .son {
        width: 50%;
        height: 50%;
        background-color: pink;
        /* 相对于父盒子的20% */
        margin-top: 20%;
    }
</style>