盒子模型-怪异模式和标准模式

首先，两种模式可以利用box-sizing属性进行自行选择：

　　标准模式：box-sizing:content-box; 

       用户设置的宽度和高度是相对稳定的，增加border、padding会使整个盒子变大

　　怪异模式：box-sizing:border-box;  

     为内减模式，盒子的实际宽度和高度是固定不变的，用户已经设置好的width和height。 增加border和padding的值，不会改变  盒子的大小，只改变内容区域的大小,border-box 改变border padding不会影响到其他的盒子

两种模式的区别：

　　标准模式会被设置的padding撑开，而怪异模式则相当于将盒子的大小固定好，再将内容装入盒子。盒子的大小并不会被padding所撑开。

　　例：

　　 .box{ 
box-sizing:border-box;   //没有添加时，按照标准模式计算， 添加时按照怪异模式解析 
width:200px; 
height:200px; 
border:2px solid black; 
padding:50px; 
margin:50px; 
} 

　　 标准模式：盒子总宽度/高度 = 内容区宽度 /高度+padding+border + margin。效果：    

怪异模式下的效果　盒子总宽度/高度 = width/height + margin。：