02-盒模型:01_margin

知识点

未补充

原文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外边距-margin</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .div1, .div2 {
            width: 300px;
            height: 300px;
            background-color: rgb(231, 63, 50);
            color: rgb(255, 255, 255);
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            line-height: 300px;
            /*
                margin: 20px; 如果里面只有一个参数 代表 上下左右的外边距都是20px
                    相当于:
                        margin-top: 20px;
                        margin-right: 20px;
                        margin-bottom: 20px;
                        margin-left: 20px;
                margin: 20px 30px; 如果里面是两个参数, 第一个参数代表上下外边距 第二个参数代表左右外边距
                    相当于:
                        margin-top: 20px;
                        margin-right: 30px;
                        margin-bottom: 20px;
                        margin-left: 30px;
                margin: 20px 30px 40px; 如果里面有三个参数, 第一个参数代表上外边距, 第二个参数代表左右外边距, 第三个参数代表下外边距
                    相当于:
                        margin-top: 20px;
                        margin-right: 30px;
                        margin-bottom: 40px;
                        margin-left: 30px;
                margin: 20px 30px 40px; 如果里面有四个参数, 第一个参数代表上外边距, 第二个参数代表右外边距, 第三个参数代表下外边距, 第四个参数代表左外边距
                    相当于:
                        margin-top: 20px;
                        margin-right: 30px;
                        margin-bottom: 40px;
                        margin-left: 60px;
            */
            margin-bottom: 50px;
            /* position: relative;
            z-index: 2; */
        }
        .div2 {
            /* position: relative;
            z-index: 1; */
            margin-top: 50px;
            background-color: rgb( 47,124,238);
            color: rgb(255, 255, 255);
        }
        /*
            两正，取大的
            一正一负，取和
            两负，取绝对值大的
        */
        /*
            margin 重叠 塌陷现象:
                条件: 只发生在垂直方向 并且只有块级元素才会产生
                -- 当两个盒子的属性值都为正数且不相等时取最大值 两值相等时则取其中一值
                -- 当两个盒子的属性值为一正一负时 取值为两数之和
                -- 当两个值为负数时 取绝对值最大的值
        */
    </style>
</head>
<body>
    <!-- 这个设置下边距 -->
    <div class="div1">div1</div>
    <!-- 这个设置上边距 -->
    <div class="div2">div2</div>
</body>
</html>
posted @ 2024-01-22 17:45  瓷禾  阅读(17)  评论(0)    收藏  举报