盒模型、标准盒模型、怪异盒模型、margin的特点、padding的特点

盒模型

• width height
• padding
• border
• margin

标准盒模型(w3c盒模型)

box-sizing:content-box;
总宽 = 内容区width+padding左右+border左右+margin左右

怪异盒模型(ie盒模型)

box-sizing:border-box;
总宽 = width+margin左右
ie低版本缺失文档声明,也会触发怪异盒模型

margin和padding

padding四种写法

• 四边
• 上下 左右
• 上 左右 下
• 上 右下左

特点

• 会撑大元素
• 不能设置负值
• 对内联元素来说 左右有效、上下不生效
• 可以调整内容区的位置

margin

四种写法同padding

特点

• 不会撑大元素
• 可以设置负值
• 对内联元素来说 左右生效，上下不生效
• 可以调整元素与元素之间的距离
• margin：auto；设置块元素水平居中

margin的bug

margin重叠
  给上面的元素设置下边距,给下面的元素设置上边距
margin传递：给元素里面的第一个子元素添加上边距时会添加到父元素身上
	用padding代替
  	添加float
 	给外层添加一个边框
  	给父元素添加  overflow：hidden