盒模型

盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分
盒子模型分为2种:
1.W3C标准的盒子模型(标准盒模型)
2.IE标准的盒子模型(怪异盒模型)

标准盒模型与怪异盒模型的表现效果的区别之处:
1.标准盒模型中width指的是内容区域content的宽度,height指的是内容区域content的高度
标准盒模型中下盒子的大小 = width(content) + padding + border + margin

标准盒模型

2.怪异盒模型中的width指的是内容,内边距,边框总的宽度(content + padding + border);height指的是内容,内边距,边框总的高度
怪异盒模型下盒子的大小 = width(content + padding + border) + margin

怪异盒模型

box-sizing的使用
如果想要切换盒模型也很简单,这里需要借助css3的box-sizing属性
box-sizing的默认属性是content-box

box-sizing: content-box 是W3C盒子模型
box-sizing: border-box 是IE盒子模型

content-box:默认值,border 和 padding 不算到width 范围内,可以理解为是 W3c 的标准模型(default).总宽=width+padding+border+margin
border-box:border和padding划归到width范围内,可以理解为是IE的怪异盒模型,总宽=width+margin