盒模型的认识
- 盒模型分为
,包括 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
