CSS3完善和模式

CSS3改善了传统盒模型架构，增强盒子构成要素的功能，扩展了盒模型显示的方式，具体描述如下

• 　　改善构造：除了传统的内容区域，边框区，补白区和边界区外，为盒子新增了轮廓区。

• 　　增强功能：内容增强CSS自动添加内容功能，增强内容溢出、换行处理，匀速多重定义背景图，控制背景图显示方式等；增加背景图边框，多重边框，圆角边框，等功能；完善margin：auto；布局特性。

• 　　扩展显示：完善传统的块显示特性，增强弹性，伸缩盒显示功能，丰富网页布局手段。

定义显示方式

　　为了兼顾IE的怪异模式，CSS3对盒模式进行了改善，定义了box-sizing属性，该属性能够事先定义盒模式尺寸解析方式。box-sizing属性的基本语法如下

　　　　box-sizing：content-box | border-box | inherit;

　　　　box-sizing属性初始值为content-box，适合所有能够定义宽高的元素，取值说明：

　　　　　　content-box：该属性将维持css2.1盒模式的组成模式，既元素，width/height=border+padding+content。

　　　　　　border-box：该属性值将重新定义css2.1盒模式组成模式，既元素，width/height=content;

理解：

　　如果这个CSS不写  默认就是content-box  

　　　　content-box ：border和padding不算入width中。比如：一个100px的宽度的div，如果他的padding值为20px，border为5px,那么他的实际宽度就为100 + 20*2 + 5*2 = 150px

 

　　　　border-box ：border和padding算入width中。比如：一个100px的宽度的div，如果他的padding值为20px，border为5px,那么他的内容宽度就为100 - 40*2 - 5*2 = 10px。