盒子模型是什么？
当对一个页面进行layout的时候，浏览器的渲染引擎会根据CSS基础框盒模型，将所有元素表示为一个个矩形的盒子。
一个盒子模型由四个部分组成：
1、content：实际内容，显示文本和图像
2、padding：内边距，清除内容周围的区域，内边距是透明的，取值不能为负，受盒子的background属性影响。
3、border：边框，围绕元素内容的内边距的一条线或者多条线，由粗细、样式、颜色三部分组成
4、margin：外边距，在元素外为整体创造空白，即不能放其他元素的区域
盒子模型的分类：
- W3C标准盒子模型
- IE怪异盒子模型
默认情况下，盒子模型为W3C标准盒子模型。
标准盒子模型没有什么好讲的，就是：
总宽度：width+padding+border+margin
总高度：height+padding+border+margin
IE怪异盒子模型：
在IE中：
总宽度：width+margin
总高度：height+margin
就是说，在IE中content的height和width就包括了padding和border。
解决方式：Box-sizing
CSS中box-sizing属性定义了引擎如何计算一个元素的总宽度和总高度
box-sizing:content-box//为默认值，元素的width和height不包含padding和border，与标准盒子模型一致
box-sizing:border-box//元素的width和height包含padding和border，与怪异盒子模型一致
box-sizing:inherit//使box-sizing值从父级继承