在我们学习css中盒模型非常重要！

那么什么是盒模型呢？ css model 这一术语是用来设计和布局时使用的。 所有的HTML元素都可以看做盒模型 它包括：外边距、边框、内填充和实际内容。

我们最常见的盒子元素就是<div>标签除此之外还有<ul><ol><p><h><table><form>这些块级元素都是盒子模型

外边距：margin 内填充：padding 边框：border

内边距-padding

内边距就是盒子边框到内容的距离

div {
    height:100px;
    width:100px;
    padding:20px;  //猜猜我这个盒子多高多宽
}

当我们给一个盒模型的标签设定长宽高的时候，其实是设置的内容的宽高，而我们设置padding后盒子就变成了内容的大小加上内边距的大小,所以我们上面例子的大小就是长和宽都是240px

而我们在更改内容位置的时候我们单纯的使用padding标签会使我们的盒子变大导致影响到页面其他内容的位置，所以我们可以更具体点，比如padding-top padding-left padding-bottom padding-right设置相应的内边距后，我们再在内容的大小上进行相应的减少就能维持原盒子大小不变拉！！

在我们单独使用padding的时候我们可以给他添上多个数据

div{
    padding:50px 100px; //两个数据之间用空格分开 而第一个是上下的内边距 第二个是 左右的值
}

div{
    padding:20px 40px 60px; //同样数据之间用空格分开 第一个是上内边距相当于padding-top 第二个是左右内边距 第三个是下内边距相当于padding-bottom
}

div{
    padding:10px 20px 30px 40px; //当是四个值的时候 顺时针！ 上下右左！ top,right,bottom,left
}

边框-border

边框顾名思义就是盒子模型的边框

边框就是三要素！ 粗细 样式 颜色 粗细：border-width 样式：border-style 颜色：border-color

按照三要素来设置边框

div{
    border-width: 5px 10px; //上下 左右
    border-style: solid dotted double dashed; //顺时针 上右下左 实线 点线 双线 虚线
    border-color: green black red blue; //顺时针 相应的颜色
}

按照方向来设置边框

div{
   border-top-width: 10px;
   border-top-color: red;
   border-top-style: solid; //以此类推
}

外边距-margin

外边距就是盒子整体相对其他物体的距离

例子1

    <span class="box1">盒子1</span>
    <span class="box2">盒子2</span>

.box1{
 margin-right: 40px;
}
.box2{
 margin-left: 60px;
}

那么以上两个span标签的距离是多少呢，经过实验我们可以发现两个span标签的距离是100px并不是大的60px

例子2

    <div class="box1">盒子1</div>
    <div class="box2">盒子2</div>

.box1{
 margin-right: 40px;
}
.box2{
 margin-left: 60px;
}

那么以上两个盒子的垂直距离是多少呢，经过我们的测试发现，两个盒子的上下垂直距离只有100px出现了外边距合并,因为这是CSS本身存在的外边距塌陷问题！！