css盒子模型是css中一个重点也是难点，因为这个盒子模型与定位属性会设计到布局的问题
盒子模型具有
1.边框（border）
2.内边距（padding）
3.外边距（margin）这三个属性
盒子模型一般分为两种：IE盒子模型和标准盒子模型
IE盒子模型
所谓IE盒子模型，就是之前IE浏览器实现的一种怪异的盒子模型，怎么怪异呢？当我们这样设置的时候:
div {
box-sizing: border-box;
-webkit-box-sizing:border-box;
-mox-box-sizing:border-box;
height: 200px;
width: 200px;
background: #242424;
margin: 10px;
padding: 10px;
border: 2px solid #24ce70;
}
理论上我们想要设置的就是content box的宽高嘛，但是IE在解析的时候会按照这个规则解析：
width = content-width + padding-width + border-width
height = content-height + padding-height + border-height
通俗讲：IE盒子模型宽高就是内容(content)，内填充(padding)，边框(border)。如果盒子模型设定了固定的width，如果设置border，padding任何一个属性的宽度，将会压缩内容区，让内容区变小
内容1.png
IE盒子模型.png
标准盒子模型
标准的css盒子模型宽高就是内容区宽高；
div {
box-sizing: centent-box;
-webkit-box-sizing:centent-box;
-mox-box-sizing:centent-box;
height: 200px;
width: 200px;
background: #242424;
margin: 10px;
padding: 10px;
border: 2px solid #24ce70;
}
如果盒子模型设定了固定的width，则这个width指的就是内容的width了，如果再添加border，padding的值，这时候总的宽度就会超过设置的宽度，这个需要注意，不然就会影响到了网页布局了
标准盒子模型.png
IE盒子模型和标准盒子模型的设置
CSS3加了个box-sizing属性，变相承认了这两种盒子都对，不过box-sizing默认属性就是content-box，即标准盒子模式，IE盒子模型呢，是属性border-box。
浏览器兼容性
IE8及以上版本支持该属性，Firefox 需要加上浏览器厂商前缀-moz-，对于低版本的IOS和Android浏览器也需要加上-webkit-。实际上，很多reset.css或者normal.css里都包含如下CSS语句，也是比较赞成的用法：
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
