盒模型（标准盒模型、怪异盒模型）

盒模型由由四部分组成，分别为：

content   ------------>   内容,元素的宽高

padding   ------------>   内边距

border     ------------->   边框

margin    -------------->  外边距

内边距：内容与边框之间的间距

     设置不同方向内边距

          padding-方向词

     方向词：

          top------上

          right-----右

          bottom-----下

          left-------左

元素背景颜色会蔓延到内边距上

padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性值。

外边距：元素边框与边框之间的间距（支持负值），可以更改元素位置

       设置不同方向上外边距

            margin-方向词：

       方向词：

            top------上

            right-----右

            bottom-----下

            left-------左

margin:0 auto;一个有宽度的元素容器在其父元素内水平居中。

margin的特殊取值

1. 两个元素水平排列，两个元素之间的间距margin可以相加；
2. 两个元素垂直方向上下排列，外边距margin重叠，取最大值。如果想要外边距实现相加，给任意元素添加一个父元素并使用overflow：hidden；
3. 父子关系中，子元素添加margin-top会作用在父元素上。

解决方法:

1、给父元素添加一个1px的透明边框border:1px solid transparent;

2、给元素添加浮动或者给父元素添加overflow:hidden;

3、给父元素添加padding-top

4、给父元素使用定位position: absolute;

盒模型分类：

W3C官方盒模型（标准盒模型）

IE怪异盒模型

 标准盒模型的计算:

      盒子的宽度=内容宽+左右内边距+左右边框宽+左右外边距

      盒子的高度=内容高+上下内边距+上下边框高+上下外边距

IE怪异盒模型

元素触发怪异盒，元素需要通过box-sizing属性才能触发怪异盒

box-sizing

取值：

content-box （内容盒子，W3C官方盒模型，标准盒模型，默认）

bored-box（触发盒模型，改变了元素盒模型的计算方式）

元素设置的width、height里面包含了内边距（padding）和边框（border）宽高

IE怪异盒模型的计算:

盒子的宽度=内容宽（显示内容宽+左右内边距+左右边框宽）+左右外边距

盒子的高度=内容高（显示内容高+上下内边距+上下边框宽）+上下外边距