盒子模型
盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版。
?
盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型。 (为了让网页能兼容各个浏览器，让我们用标准 W3C 盒子模型。)
?
?
盒子本身有一个大小 : 宽 和 高
?
内容离内边框的距离叫做—–内边距
?
盒子与盒子之间可以保持距离: 外边距
?
一个盒子: 有边框(边框有多厚? 用像素自定义)
?
于是我们引入以下属性：
宽:Width
高:height
边框: border
内边距:padding
外边距:margin
?
为何要reset浏览器？
浏览器对于div,p,li标签等元素，可能会对他们设置一个默认的margin值，border，padding值，而且不同的浏览器之间设的默认可能不同。
?
标准盒子模型
从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分，有自己独立的width，height。
?
<div style="margin: 0 auto">
? ? <div style="float: left;width: 200px;height: 100px;padding: 10px 20px;margin: 20px 40px;background-color: darkolivegreen;text-align: center;vertical-align: middle">
? ? ? ? 200*100
? ? </div>
? ? <div style="float: left;width: 200px;height: 100px;padding: 10px 20px;margin: 20px 40px;background-color: darkolivegreen;text-align: center;vertical-align: middle">
? ? ? ? 200*100
? ? </div>
</div>
?
一个盒子
margin 为 20px
border 为 1px
padding 为 10px
content 的宽为 200px、高为 50px
如果用标准 W3C 盒子模型解释，那么这个盒子需要占据的位置为：
宽 20*2 + 1*2 + 10*2 + 200=262px
高 20*2 + 1*2 + 10*2 + 50=112px
盒子的实际大小为：
宽 1*2 + 10*2 + 200=222px
高 1*2 + 10*2 + 50=72px；
