CSS盒模型(box model）
所有的HTML元素都可以称为盒模型，在css中 box model 这一术语是用来设计和布局实用的。
css盒模型本质上是一个盒子，封装周围的元素：包括外边距，外边框，内边距和内容。
盒模型允许其他元素和周围元素之间的边框之间的空间放置元素。
下面的图片说明了盒模型（Box model）
不同部分说明（标准 ）：
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
最终的元素宽度计算是这样的。
总元素宽度 = 宽度 + 左右内边距 + 左右边框
总元素高度 = 高度 + 上下内边距 + 上下边框
我们设置的width和height属性实际上是元素的content内容区的宽度与高度 ，设置padding和border之后元素尺寸就会变大
IE 5 6 怪异盒模型
IE盒模型的可能更好理解设置的width和height 是 实际宽度和高度
元素实际高度 = width - 左右内边距 - 左右边框
元素实际高度 = height - 上下内边距 - 上下边框
浏览器的兼容性问题
一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。
IE8 及更早IE版本不支持 填充的宽度和边框的宽度属性设。
解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。
box-sizing 解决办法
box-sizing: content-box | border-box | inherit;- content-box (W3C标准盒模型) 默认
- border-box (怪异盒模型)