css--盒子模型

盒子模型有什么用？

在浏览器 渲染页面元素时，
为了计算 元素的实际最终尺寸，
会根据盒模型标准，将所有元素表示成一个个的矩形盒子，
每个盒子包括4大区域。

元素的盒子模型包括的4大区域：

 - content：内容的宽度、高度
 - padding：内边距边界 
 - border：边框边界 
 - margin：外边距（margin 的尺寸不会被计算入最终容器宽度）

W3C标准盒模型和IE盒模型的区别？
区别在于box-sizing【元素的最终尺寸计算规则】
默认值不同：

1. 标准盒模型的box-sizing默认值为: content-box;
即元素实际宽度尺寸=width(宽度) + padding(内边距) + border(边框)

设置padding和border 会 改变元素的最终尺寸

2. IE盒模型的box-sizing默认值为: border-box;
即元素实际宽度尺寸=width(宽度) ；

设置padding和border 不会 改变元素的最终尺寸