盒子模型之外边距

何为外边距：
外边距指的是盒子与其他盒子之间的距离，他不会影响可见框的大小，而是会影响盒子的位置

外边距(margin)

四个外边距：

margin-top : 上外边距
margin-right : 右外边距
margin-bottom : 下外边距
margin-left : 左外边距

外边距的设置语法：
margin-xxx:值

注意：
这个外边距设置的值可以理解为最小值，即最小的外边距，因为页面中的元素都是靠左上放置的，有的时候当设置了右边和底部的外边距的值，但是盒子距离右边框和底边框还是很远。

但当设置了右或下外边距的时候会改变其他盒子的位置

内边距的值也可设置为一个负值
设置为负值的时候盒子移动方向会跟原来的方向相反，可以使盒子陷入到整个页面外面
比如：

下面的绿色的盒子因为上面盒子下边距的设置他也重叠在了上面黄色盒子的身上
注意：
此时这样的块元素还是都独占一行

auto(设置外边距的最大值)

margin还可设置为auto，auto一般只设置给水平方向的margin
如果指定，左外边距或右外边距的margin为auto，则将会自动将左外边距或者右外边距设置为最大值，最大值有多大就设置为多大
语法：
margin-xxx:auto

而且，不管页面大小怎么变化，这个盒子一定是靠最右边的
垂直方向外边距设置为auto，则默认外边距设置为0，而且如果之前设置过垂直方向的外边距也会被覆盖

原来设置的顶部外边距被覆盖了变成了0

设置左右外边距相等且不随页面大小而变不等

当左右外边距都设置为auto则会将两侧的外边距设置为相同的值
可使子元素在父元素中水平居中

水平居中

同时设置四个方向的外边界

外边距同样可以使用简写属性margin，可以同时设置四个方向的外边距
语法：
margin: 值1 值2 值3 值4
如果指定三个值，则这三个值会分别设置给 上，左右，下
两个值则为 上下，左右
所以可以这么设置盒子居中margin:0 auto

垂直外边距的重叠

在网页中垂直方向的相邻外边距会发生外边距的重叠

何为外边距的重叠：
即指兄弟元素之间的相邻外边距会取最大值，而不是取和。

注意，这里外边距重叠有两个条件：
1.垂直方向
2.相邻

而且相邻的外边距不一定一个是下外边距一个是下外边距，还可以都是上外边距或者都是下外边距
如下：

仅仅只设置了子元素div2的上外边距，但是，外父元素div1的上外边距也受到了影响，说明两个外边距重叠，取最大的外边距

这里的父子元素都是相邻的，而且设置的也是垂直方向的，当我们使其不相邻，比如在两个元素之间加入一些元素，就会使他们不重叠。
如下：

我们还可以给父元素或者子元素设置一个边框，或者内边距这样的话也会使两个元素不相邻，也会使外边距不重叠

当然，我们可以通过设置父元素的内边距来达到给子元素设置外边距的效果