大家都了解盒模型吧，content+padding+border+margin组成的盒模型，今天主要讲的就是其中的margin（元素的外边距）
- 先来了解下margin和容器尺寸之间的关系
盒子的容器从不能的角度分析，有两种不同的定称，一种是只有content和padding，border组成的，我们称之为可视尺寸（clientWidth、clientHeight）；还有一种就是在前面的基础上加上margin值的，我们称之为占据尺寸
特性一：margin值可以改变的是元素可视尺寸，它有以下前提需要满足：适用于没有设置宽高（width、height）的块状（block）元素；只适用于水平方向尺寸
使用案例：可以运用于一侧定宽的自适应布局
特性二：margin可以改变元素的占据尺寸，它有以下前提需要满足：block、inline-block均可以使用；有无设置width、height无关；可以试用于水平和垂直方向
使用案例：滚动容器的上下留白
2.margin和百分比单位
在移动端布局的时候，我们一般会使用相对单位，百分比、em、rem，而此时如果使用margin的单位是相对单位会有不同的计算方式
特性：普通元素的margin是相对于容器的宽度计算的
绝对定位元素的margin是相对于第一个定位元（absolute、relative、fixed）素的宽度计算的
3.margin在垂直方向的高度塌陷问题
高度塌陷的情况只会存在于垂直方向
存在高度塌陷的情况：父与子之间存在高度塌陷、相邻子元素之间存在高度塌陷
在父元素没有给padding、border，或者父元素是非块状格式化的上下文元素、或者父和子元素之间没有inline元素分离，此时如果给子盒子加margin值，在界面上并不会显示出来，如果需要显示，只要破坏上述条件之一即可
相邻元素之间会存在高度塌陷情况：当两个元素有同正数的margin的时候，他们之间的距离是最大的margin值；当两个元素有一正一负的margin的时候，他们之间的距离是两数之和；当两个元素的margin都是负数的时候，则他们之间的距离，是绝对值较大的那个数值
技巧：我们在写列表的时候，一般会写间距的时候，只会给上间距或者下间距，其实我们可以利用高度塌陷这个特性，上下间距都写上，这样即使页面有一点变动，也不会影响整体的效果
4.margin里面的取值为auto分析
我们在使用margin的时候，一般会使用auto取值，你知道auto取值，在浏览器来来讲，是怎么解析的吗
一般我们写一个块状元素的时候，即使不写width值，他会自动的充满容器，而一旦写了值（不论是固定值还是相对值），那么就会按照所写尺寸按照标准文档流去解析，此时元素的右边就会出现空白区域，写上margin：0 auto即可以左右均分空白区域即可。还有一种应用是，你可以写上margin-right:30px;左边剩余的部分，你写上margin-left：auto也会自动的去解析，使其均分空白区域
注意：上述的情况只会出现在block元素的水平方向上，像img、input都是不可以的，因为他在不写宽度的时候，是没有办法自动填充盒子的，且标准文档流的块状元素在不写高度的时候，是不会自动填充盒子的高度的。