盒模型的認(rèn)識

• 盒模型分為,包括 margin, border, padding, content
  盒模型又稱框模型（Box Model）, 包含了元素內(nèi)容(content)、內(nèi)邊距（padding）、邊框（border）、外邊距（margin）如圖：

盒模型

標(biāo)準(zhǔn)盒模型 width = content
IE盒模型 width = content + padding + boder

瀏覽器中 標(biāo)準(zhǔn)盒模型（content-box）和 IE盒模型 （border-box）

通過css3屬性 box-sizing: content-box | border-box 設(shè)置如下：

.contentBox{
  box-sizing: content-box;
  width: 100px;
  border: 10px #f00 solid;
  height:100px;
  padding: 20px;
  margin: 20px;
}

標(biāo)準(zhǔn)盒模型

換成IE盒模型如下：

.borderBox{
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  margin: 20px;
  border: 10px #f00 solid;
  padding: 20px;
}

IE盒模型

由此可以看出結(jié)論：
標(biāo)準(zhǔn)盒模型 width = content
IE盒模型 width = content + padding + boder