盒模型 和 怪异盒模型

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

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

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

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

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

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

设置不同方向内边距

padding-方向词

方向词：

top------上

right-----右

bottom-----下

left-------左

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

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

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

设置不同方向上外边距

margin-方向词：

方向词：

top------上

right-----右

bottom-----下

left-------左

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

margin的特殊取值

两个元素水平排列，两个元素之间的间距margin可以相加；

两个元素垂直方向上下排列，外边距margin重叠，取最大值。如果想要外边距实现相加，给任意元素添加一个父元素并使用overflow：hidden；

父子关系中，子元素添加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怪异盒模型的计算:

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

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