盒子模型是CSS中一个重要概念，理解了盒子模型才能更好的排版。盒子模型分为两种：ie盒子模型（怪异盒模型）和标准w3c盒模型。盒子模型包含了元素内容（content）、内边距（padding）、边框（border）和外边距（margin）几个要素。
标准盒模型
标准盒子模型.jpg
通过上图我们可以看到标准盒模型的范围包括：content、padding、border、margin，并且content部分不包含其他部分。
ie盒模型
ie盒子模型.jpg
ie盒模型也是包括content、padding、border、margin，和标准盒模型不同的是：ie盒模型大的content部分包含了padding和border部分
box-sizing
box-sizing的语法：
box-sizing:content-box || border-box || inherit;
- 当设置box-sizing:content-box;时，将采用标准模式解析计算，也是默认模式；
-
当设置box-sizing:border-box;时，将采用怪异模式解析计算。
所以将标准盒模型转为ie盒模型的时候可以给元素添加box-sizing:border-box;属性来解决。
网友评论