盒模型

模型

W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分 

IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 padding

标准盒模型（content-box）和怪异盒模型（border-box）的区别是width和height设置的“部分”不同。为元素设置好width和height之后

标准盒模型的content范围内的高度和宽度是不变的，padding和border是在content的范围外进行增加，将盒模型撑大。content范围内的大小始终不变。刚好对应上标准盒模型的名称content-box。    box-sizing: content-box;

怪异盒模型的border范围内的高度和大小是不变的，padding和border是在border范围内进行增加，会压缩content大小，border范围内的大小始终不变。刚好对应上怪异盒模型的名称border-box。     box-sizing: border-box;