转自 菜鸟教程
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括： 边距（外边距） ， 边框 ， 填充（内边距） ，和 实际内容 。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
转自 链接
盒子模型有两种，分别是W3C盒子模型(标准盒模型)和IE盒子模型(怪异盒模型)
1.标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度。
2.标准盒模型下盒子的大小 = content + border + padding + margin
1.怪异盒模型中的width指的是内容、边框、内边距总的宽度（content + border + padding）；height指的是内容、边框、内边距总的高度
2.怪异盒模型下盒子的大小=width（content + border + padding） + margin
建议不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。
即box-sizing属性可以指定盒子模型种类，content-box指定盒子模型为W3C（标准盒模型），border-box为IE盒子模型（怪异盒模型）。
浏览器盒子模型
一般来说有两种：IE版和标准W3C版
IE版和W3C版主要差别在于IE把border和padding都算进width中，而W3C版的则是width只包括content
默认浏览器会使用标准模型。如果需要使用替代模型，您可以通过为其设置box-sizing: border-box来实现。 这样就可以告诉浏览器使用border-box来定义区域，从而设定您想要的大小。
.box{
box-sizing:border-box
}
如果你希望所有元素都使用替代模式，而且确实很常用，设置box-sizing在<html>元素上，然后设置所有元素继承该属性，正如下面的例子。如果想要深入理解，请看 the CSS Tricks article on box-sizing 。
html{
box-sizing:border-box
}
*, *::before, *::after{
box-sizing:inherit
}
