css中的盒子模型分為兩類，標準盒模型（W3C）和怪異盒模型（ie）。

標準盒模型即：盒子寬度= width+(padding-left + padding-right)+(margin-left + margin-right)+(border-left + border-right)。如下圖所示。盒子寬度為80px+20px*2+10px*2+20px*2=180px;

怪異盒子模型即：盒子寬度=(margin-left + margin-right)+width  //width包含padding-left+padding-right+border-left+border-right。如下圖所示。盒子寬度為80px+20*2=120px;

標準盒模型（W3C） box-sizing:content-box;(預設模式計算)；

怪異盒模型（ie）box-sizing:border-box;(怪異模式計算)；