首先，兩種模式可以利用box-sizing屬性進(jìn)行自行選擇：

標(biāo)準(zhǔn)模式：box-sizing:content-box;

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

兩種模式的區(qū)別：

標(biāo)準(zhǔn)模式會(huì)被設(shè)置的padding撐開，而怪異模式則相當(dāng)于將盒子的大小固定好，再將內(nèi)容裝入盒子。盒子的大小并不會(huì)被padding所撐開。

例：

.box{
box-sizing:border-box; //沒有添加時(shí)，按照標(biāo)準(zhǔn)模式計(jì)算， 添加時(shí)按照怪異模式解析
width:200px;
height:200px;
border:2px solid black;
padding:50px;
margin:50px;
}

標(biāo)準(zhǔn)模式：盒子總寬度/高度 = 內(nèi)容區(qū)寬度 /高度+padding+border + margin。效果：

1.png

怪異模式：盒子總寬度/高度=width/height+margin。效果：

2.png

前言

[摘自w3c]http://www.w3school.com.cn/css/css_boxmodel.asp

• 盒模型分為 標(biāo)準(zhǔn) w3c 盒子模型、IE 盒子模型，以及css3中的 伸縮盒模型。

• 注意區(qū)分：盒子模型的寬高、盒子的實(shí)際寬高、盒子內(nèi)容content的寬高

• 我們一般理解的盒子模型是標(biāo)準(zhǔn)盒子模型

• 我們?cè)贒OM操作中一般使用的是盒子的實(shí)際大小，margin 不參與計(jì)算

標(biāo)準(zhǔn)盒模型（w3c 盒子模型）

CSS 框模型 (Box Model) 規(guī)定了元素框處理元素內(nèi)容、內(nèi)邊距、邊框 和 外邊距 的方式，其模型圖如下：

1.png

內(nèi)邊距、邊框和外邊距都是可選的，默認(rèn)值是零。但是，許多元素將由用戶代理樣式表設(shè)置外邊距和內(nèi)邊距?？梢酝ㄟ^將元素的 margin 和 padding 設(shè)置為零來覆蓋這些瀏覽器樣式。這可以分別進(jìn)行，也可以使用通用選擇器對(duì)所有元素進(jìn)行設(shè)置：

* {
  margin: 0;
  padding: 0;
}

在標(biāo)準(zhǔn)盒模型中，width 和 height 指的是內(nèi)容區(qū)域的寬度和高度。增加內(nèi)邊距、邊框和外邊距不會(huì)影響內(nèi)容區(qū)域的尺寸，但是會(huì)增加元素框的總尺寸。

w3c中的盒子模型占用的大小：margin + border + padding + width/height;
width: margin2 + border2 + padding2 + width;
height: margin2 + border2 + padding2 + height;

w3c中盒子模型的實(shí)際大?。篵order + padding + width/height;
width: border2 + padding2 + width;
height: border2 + padding2 + height;

w3c中盒子模型的內(nèi)容區(qū)域的大?。簑idth/height
width: width;
height: height;

怪異盒模型（IE 盒子模型）

相較于標(biāo)準(zhǔn)盒模型，IE盒模型最大的不同在于：
IE 盒子模型的 content 部分包含了 border 和 padding 這兩個(gè)屬性。

IE 盒子模型占用的寬度：margin + content-width/height;
width: margin2 + width;
height: margin2 + height;

IE 盒子模型的實(shí)際大?。篶ontent-width/height
width: width;
height: height;

實(shí)例對(duì)比

例如一個(gè)盒子模型如下：
margin:20px; border:10px; padding:10px; width:200px; height:50px;

1.使用w3c盒子模型解釋：

• 盒子模型占用的大小為：
  寬度：20x2+10x2+10x2+200=280px;
  高度：20x2+10x2+20x2+50=130px;

• 盒子的實(shí)際大小為：
  寬度：10x2+10x2+200=240px;
  高度：10x2+20x2+50=90px;
• 盒子內(nèi)容的大小為：
  寬度：200px;
  高度：50px;

2.使用IE盒子模型解釋：

• 盒子模型占用的大小為：
  寬度：20x2+200=240px;
  高度：20x2+50=90px;

• 盒子的實(shí)際大小為：
  寬度：200px;
  高度：50px;