盒子模型与内外边距设置

1. 盒子模型
   （1）box-sizing:content-box: 盒子模型默认值，元素应用该模型时，计算方式为 外边距+边框宽度+内边距+内容区域（margin ， border-width ，padding，实际内容占宽），设置的width/height属性只是内容区域宽度；
   （2）box-sizing:border-box: 元素应用该模型时，计算方式为 外边距+宽度，设置的宽度包含了 边框宽度+内边距+内容区域，这种方式更方便我们平时的布局，省却了很多人为的计算过程；

2. 外边距
   （1）margin-top/right/bottom/left 上/右/下/左外边距
   （2）margin：15px; 同时设置上右下左四个方向外边距
   （3）margin：10px 15px; 第一个值为上下外边距10px；第二个值为左右15px外边距，margin：0 auto；常用于设置元素内容水平居中
   （4）margin：5px 10px 15px；第一个值为上外边距5px，第二个值为左右外边距10px，第三个值为下外边距15px
   外边距合并：竖直方向上的两个外边距相遇时，会合并为一个外边距，值以较大的一个为准
   外边距溢出：父元素没有上边框，子元素与父元素上沿重合，为子元素添加上外边距会作用到父元素身上，可以给父元素设置 :before{content:’’,display:table}伪元素占位

3. 内边距
   （1）设置内边距会直接作用在元素上，使元素变大
   （2）padding设置方式与外边距margin设置方式一样，没有auto属性
   （3）给一个元素设置padding，会使padding部分呈现出该元素的背景色