盒子模型-怪異模式和標准模式

首先，兩種模式可以利用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。怪異模式下的效果：