定义
html文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒模型。盒模型通过四个边界来描述：margin（外边距），border（边框），padding（内边距），content（内容区域），如图所示：
CSS3中新增了一种盒模型计算方式：box-sizing。常用的值有两个：content-box（默认）和border-box。
content-box
布局所占宽度Width：
Width = width + padding-left + padding-right + border-left + border-right
布局所占高度Height:
Height = height + padding-top + padding-bottom + border-top + border-bottom
看个例子
div{
width:200px;
height:200px;
padding:10px;
border:1px solid black;
}
content-box 设置的 width 是内容区域的宽度，height 是内容区域的高度。
border-box
布局所占宽度Width：
Width = width(包含padding-left + padding-right + border-left + border-right)
布局所占高度Height:
Height = height(包含padding-top + padding-bottom + border-top + border-bottom)
看个例子
div{
box-sizing:border-box;
width:200px;
height:200px;
padding:10px;
border:1px solid black;
}
border-box 设置的 width 是布局所占的宽度，也就是内容区域的宽 + padding-left + padding-right + border-left + border-right 之和。height 是布局所占的高度，也就是内容区域的高 + padding-top + padding-bottom + border-top + border-bottom 之和。
