所有html元素都可以看作盒子。
css盒模型本质上是一个盒子，封装周围的html元素,它包括：外边距，边框，内边距和实际内容。
//W3C标准盒模型（浏览器默认）
box-sizing:content-box;
//IE怪异盒模型
box-sizing:border-box;
默认情况下，一个元素的总宽度计算方式：
总宽度=左外边距+左边框+左内边距+宽度+右内边距+右边框+右外边距。
div{
300px;
padding:10px;
border:1px solid #eee;
margin:10px;
}
该div的宽度是300px,但它在页面上所占据的总宽度是：10+1+10+300+10+1+10=342px；
这实际上是css中设置box-sizing:content-box的效果，也就是说css盒子模型默认是box-sizing的content-box值。
box-sizing还有一个常用属性是border-box。其效果导致元素总宽度计算为：
总宽度=左外边距+宽度+右外边距。
宽度=左边框+左内边距+实际内容宽度+右内边距+右边框。
拿上述例子：div的总占宽度为10+300+10=320px; div的实际内容宽度为:300-10-10-1-1=278px
box-sizing是CSS3的新属性，为了避免在不同的浏览器中表现不同的情况产生，我们可以这样使用
Element {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}