浅谈我对CSS中盒模型的理解

盒子模型

一、什么是盒子模型？

说起盒子模型，作为前端开发的我们，相信大家都有了解过的。

它是网页布局的基石，html中的标签(元素)统统都是一个矩形的平面框, 在立体上, 它由多个平面构成, 这称为盒子模型。其中，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。，如下图所示：

二、盒模型具体的css属性

内边距：padding的属性（也叫内填充）

外边距：margin的属性

边框：border的属性

三、例子（需求1）

让文本和盒子的周围产生间距，给盒子添加泡沫（padding）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        p{
            width:240px;
            height:100px;
            background:red;
            padding-top:50px;          /* 内容与盒子上边的距离*/
            padding-bottom: 50px;      /* 内容与盒子下边的距离*/  
            padding-left: 30px;        /* 内容与盒子左边的距离*/
            padding-right: 30px;       /* 内容与盒子右边的距离*/ 
            margin: 20px auto;
        }
    </style>
</head>
<body>


    <p>内容</p>
</body>
</html>

运行结果如下图：

四、padding的用法

1、padding是长在内容和盒子之间的距离
2、padding是长在盒子里面的
3、padding主要控制子元素在盒子内部的位置关系
4、padding是添加在父元素上面
5、padding可以把盒子撑大！！！！
如果想让盒子保持原有的大小，需要在宽高的基础上减掉padding！！！
注：如果一个盒子没有固定大小（被内容撑开），添加padding 不用减
6、单一方向上设置padding值：
padding-left：
padding-right：
padding-top：
padding-bottom：
7、padding的设置方法：
padding：一个值四周都有padding
padding：两个值上下左右都有padding
padding：三个值上左右下有padding
padding：四个值上右下左有padding
8、padding不会对背景图的位置造成影响
9、padding不能为负值

五、例子（需求2）

让两个盒子（同级的盒子）之间，产生一定距离，盒子的周围产生间距。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
       .box01{
            width:400px;
            height:300px;
            background:orange;
            margin-top:20px;             /* 距离上边20px的距离*/
            margin-bottom:20px;         /* 距离上边20px的距离*/
            margin-left:20px;          /* 距离上边20px的距离*/
            margin-right:20px;        /* 距离上边20px的距离*/
        }
        .box02{
            width:400px;
            height:300px;
            background:orange;
            margin-top:20px;            /* 距离上边20px的距离*/
            margin-bottom:20px;          /* 距离上边20px的距离*/
            margin-left:20px;           /* 距离上边20px的距离*/
            margin-right:20px;          /* 距离上边20px的距离*/
        }
    </style>
</head>
<body>
<div class="box01">box01</div>
<div class="box02">box02</div>
</body>
</html>

运行结果如下图所示：

六、margin的用法

1、margin 是长在盒子外围的。
2、margin 控制当前元素与其他同级元素的位置关系。
3、margin不会改变盒子内部的大小。
4、给元素的单一一个方向设置margin值
margin-right:
margin-left:
margin-top:
margin-bottom:
5、margin设置方法：
margin:一个值四周
margin:两个值上下左右
margin:三个值上左右下
margin:四个值上右下左
6、margin是可以设置负值的！
7、margin常出现的BUG:
A、同级元素上下之间的margin的值，不会叠加，会重合，按照最大的设置
B、当父代元素和第一个子元素都没有浮动，给第一个子元素添加margin-top，会错误的把margin-top加在父元素上面。