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

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

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

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

两种模式的区别：

　　标准模式会被设置的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。怪异模式下的效果：

                                                      

转载于:https://www.cnblogs.com/leibeiwang/p/6164650.html