2021/3/14--前端第7天盒模型-CSDN博客

本文链接：https://blog.csdn.net/A444477/article/details/114777025

2021/3/14–前端第7天盒模型

6 盒模型

盒子模型的组成：content内容、padding内边距、border边框、margin外边距。
在这里插入图片描述
盒子模型分类：标准的盒子模型和怪异盒子模型（IE低版本浏览器下自动呈现）

CSS3中定义盒子模型类型属性 box-sizing:content-box | border-box
content-box:width、height为内容的宽高。（标准
border-box：设置整体border+padding+content的宽高。（怪异 IE
其他浏览器都是按照W3C标准去做，IE傻逼。

左右留白，设置左内边距。
高度一般不设置，可能会下拉继续加载东西。让它自动撑开。（不是所有情况

margin：同级元素之间的距离或者离父级元素之间的距离。
单值法：margin：10px 上下左右
双值法：margin：10px 20px 上下、左右
三值法：margin：10px 20px 30px 上、左右、下
四值法：margin：10px 20px 30px 40px 上、右、下、左

<style>
        .container {
            border: 1px solid red;
            width: 800px;
            height: 800px;
        }
        /* 设置盒子 */
        .box1,
        .box2 {
            width: 100px;
            height: 100px;
            background: green;
        }
        /* 设置盒子边距 */
        .box1 {
            /* 单值法 */
            /* margin: 50px; */
            /* 双值法 */
            /* margin: 50px 100px; */
            /* 三值法 */
            /* margin: 50px 100px 150px; */
            /* 四值法 */
            /* margin: 50px 100px 150px 200px; */
            /* 单独设置 */
            margin-top: 50px;
            margin-right: 100px;
            margin-bottom: 150px;
            margin-left: 200px;

        }
    </style>
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>

**magin塌陷**：
		<style>
        .container {
            border: 1px solid blue;
            width: 800px;
            height: 800px;
        }
        .box1,
        .box2 {
            width: 100px;
            height: 100px;
            /* 背景 */
            background: pink;
        }

        /* 为box1设置下边边距，box2设置上外边距 */
        .box1 {
            /* margin-bottom: 50px; */
            /* margin-bottom: 100px; */
            margin-bottom: 200px;
        }

        .box2 {
            margin-top: 100px;
        }
        .demo1 {
            height: 800px;
            background-color: yellowgreen;
            /* margin-top: 50px; */
            margin-top: 10px;
            
        }

        .demo2 {
            height: 500px;
            background-color: skyblue;
            margin-left: 30px;

            /* 子元素设置上边距，上边距传递到了父元素上去了 */
            margin-top: 50px;

            /* 不想让demo3向上传递 */
            /* 1 设置padding 必须大于0*/
            /* padding: 1px; */
            /* 2 设置border */
            /* border: 1px solid red; */
            /* 3 设置overflow */
            overflow: hidden;

        }
        

        /* 后代元素 */
        .demo3 {
            height: 50px;
            background-color: gold;
            margin-left: 100px;
            margin-top: 300px;
        }

        /* .ickt {
            font-size: 0;
        }

        .ickt img {
            display: block;
        } */

        .ickt {
            width: 800px;
            height: 800px;
        }

        /* 左右不合并 */
        .img1 {
            margin-right: 50px;
        }
        .img2 {
            margin-left: 100px;
        }
        
        /* 总结 */
        /* 1 子元素设置了上边距，默认传递给了父元素 */
        /* 2 父元素设置了上边距，会与子元素合并 */
        /* 合并的时候以大的为准 */
        /* 3 后代元素设置的上边距会一直传递到body */
        /* 4 父元素的上边距会与后代元素上边距合并，保留大的 */
        

        
    </style>
    <title>Document</title>
</head>
<body>
    <!-- 左右边距 -->
    <div class="ickt">
        <!-- 无空隙 -->
        <img src="../../pic/test.jpg" alt=""><img src="../../pic/test.jpg" alt="">
        <!-- 有空隙 -->
        <!-- 图片也是文本标签，换行代表里面也有东西 -->
        <img class="img1" src="../../pic/test.jpg" alt="">
        <img class="img2" src="../../pic/test.jpg" alt="">
        
    </div>


    <!-- 所有的塌陷都是合并了，各自的属性并没有消失 -->
    <!-- 父代和后代元素之间的margin塌陷  选大的那个-->
    <div class="demo1">
        <div class="demo2">
            <div class="demo3"></div>
        </div>
        
    </div>

    <!-- 兄弟元素之间的margin塌陷   选大的那个 -->
    <div class="container">
        <!-- 有一个共同父元素的两个子元素为兄弟元素 -->
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>

border：

.box {
            width: 200px;
            height: 200px;
            margin: 100px;
            background: green;
            /* 统一设置 */
            /* bd+ +tab */
            border: 10px solid red;
            /* 单独设置每一个样式 */
            border-style: dashed;
            /* 粗细 */
            border-width: thick;
            /* 颜色 */
            border-color: gold;
            /* 单独设置某一个方向 */
            border-top: 50px solid red;
            border-bottom: 20px dashed orange;
            border-left: 30px dotted purple;
            border-right: 60px double skyblue;
            /* 注意：背景色设置到border */

        }

P51

P52