css第十二课：盒子模型

学盒子模型的目的是：让盒子与盒子之间有一段距离，页面布局更好看，

看下面这个百度上的文本，最外面是背景盒子，盒子里面有内容，内容和盒子之间有空隙，我们接下来学习认识盒子模型，并学会怎么去设置这个空隙

盒子模型特指的就是我们的div标签，

官方介绍：

通俗的解释：

我们拿一个快递的案例来解释这个盒子模型

 如图所示：我们最外面这个黑色的边框代表一个快递，快递里面放着一个电脑，蓝色部分代表电脑，这个电脑和快递盒之间有泡沫保护，快递盒也有一定的厚度，这时候电脑就代表盒子的内容，

这个泡沫就是内边距，也就是从内容到快递盒的距离，快递箱的厚度就是边框，外边距是指一个快递距离另一个快递的之间的距离

1.内边距的介绍

代码演示：设置内边距

 结果：

百度后台盒子显示：

 刚开始设置的div的宽和高是400*400指的是电脑的宽和高，内边距加上以后，整个盒子的大小又变大了。而且我们可以通过结果发现我们的背景色是可以蔓延到内边距的，刚开始我们只设置了400*400大小的背景色，但是发现没有当设置了内边距，内边距部分也变成了黄绿色，amazing😀😎

padding的属性值可以设置1-4个，

padding：30px；设置一个值代表上下左右内边距都是30px；

padding：20px 30px；设置两个值代表上下为20px，左右为30px；

padding：10px 20px 30px；设置三个值代表上为10px，左右为20px，下为30px；

padding：10px 20px 30px 40px；设置四个值代表上为10px，右为20px，下为30px，左为40px；按照顺时针来算

 我们也可以设置单个方向的内边距：

padding-top：10px；/  padding-bottom：10px;  / padding-left：10px；/ padding-right：10px

只有一个方向设置内边距的话，其他方向默认为0

padding的一个重要用法就是：在style标签中写下面这个代码

 表示就是清除所有标签自带的内边距，到时候用到了我们自己进行布局，

2.边框的介绍

边框border属性，有三个属性值，border：属性值一 属性值二 属性值三

属性值一：设置边框的大小

属性值二：边框样式

属性值三：边框颜色

代码：

结果：

 也可以单独设置四个方向的边框大小：

border-top：   border-bottom：    border-left：   border-right：

说明：结果发现背景色也能蔓延到边距的，因为我们上面设置了实线边框所以效果显示不出来，看下面的结果：

 我们上面讲的是复合属性，也可以将它们拆开来看：

可以设置四个方向的大小、样式、颜色，上面三个属性都有四个属性值，也可以写1个/2个/3个属性值，含义跟上面内边距的含义一样。

 

3.外边距的介绍

外边距的属性设置和内边距差不多，可以参考内边距的参数设置：

外边距设置参考图：

清除所有标签的外边距：

 设置横向居中显示：

 margin：参数1  auto； 实现背景横向居中显示，第二个参数一定是auto，第一个参数是设置上下外边框的距离，随意设置。

结果：

 注意：

（1）背景色蔓延不到外边距

（2）外边距可以设置负值

✍接下来我们讨论外边距的特性，主要是两个问题：

 1. 兄弟关系，有两个盒子，当我给两个盒子都设置了外边距，这时候两个盒子之间的边距是不是两个盒子外边距之和？

2. 父子关系，给子盒子加外边距，但作用在父盒子身上了，怎么解决？

第一个问题：

代码演示：先给显示绿色背景的div标签加上100px的下外边距

 结果：

图一 

 百度后台显示外边框：

 接着我们再给背景色显示橙橘色的div标签增加上外边框：

 结果：

图二 

百度后台显示：

 看百度后台显示也确实是加上去了，但是看图一和图二的结果，好像两个盒子之间的距离是相等的，这就得出了结论：

兄弟关系，在垂直方向上，两个盒子都设置了外边框，则它们之间的距离为外边框的最大值，上面案例一个设置了100px，一个设置了30px，则它们之间的距离为100px。

水平方向上就不演示了，结论是：在水平方向上，会合并处理，也就是外边框之和

结论总结：兄弟关系，两个盒子都设置了外边框，那么在垂直方向上，盒子之间的距离为外边框的最大值；在水平方向上，为外边框之和。

第二个问题：

当我们在父标签身上加外边距时，

结果：

 当在父标签身上加外边距时，一切都很正常的显示，和body上下左右都间隔了50px的距离

当我们在子标签身上加外边距时：

 结果：

 红色圈住的是子盒子，红色大圈圈住的是父盒子，蓝色圈住的是子盒子的外边距，发现了子盒子的外边距的上面不在父盒子里，而是相对于body的

解决办法：

第一种：给父盒子添加上内边距

 结果：

 第二种：给父盒子设置边框

 结果：

 第三种：给其中一个盒子加浮动，父盒子和子盒子都可以

 结果：

 第四种：给父盒子加上overflow：hidden； 

 结果：

 最后：注意给父盒子加上内边距或者加上边距，整体的高度要重新计算，要减去边距或者内边距的宽度