认识css盒模型

盒模型的认识

• 盒模型分为,包括 margin, border, padding, content
  盒模型又称框模型（Box Model）, 包含了元素内容(content)、内边距（padding）、边框（border）、外边距（margin）如图：

盒模型

标准盒模型 width = content
IE盒模型 width = content + padding + boder

浏览器中 标准盒模型（content-box）和 IE盒模型 （border-box）

通过css3属性 box-sizing: content-box | border-box 设置如下：

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

标准盒模型

换成IE盒模型如下：

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

IE盒模型

由此可以看出结论：
标准盒模型 width = content
IE盒模型 width = content + padding + boder