什么是盒模型（标准盒模型，怪异盒模型）

盒模型：（内容（content）,内边距（padding）,边框（border）,外边距（margin））

CSS中的盒子模型分为两种：

W3C标准盒模型和IE怪异盒模型。

标准盒模型下：

一个块的宽度 = width+padding(左右内边距)+border(左右边框)+margin(左右外边距)；

怪异盒模型下：

一个块的宽度 = width + margin(左右)（即width已经包含了padding和border值）

CSS3的box-sizing：

box-sizing语法：
box-sizing: content-box || border-box || inherit || initial

当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；
当设置为box-sizing:border-box时，将采用怪异模式解析计算；

个人理解：

用box-sizing:border-box;写移动端的代码有一个好处 ！
一般情况下用百分比布局，
如果用正常的标准盒模型写的话，给元素添加一个1px边框的边框，元素的宽度是百分百的话，那么这个元素就超出屏幕的宽度，
如果用box-sizing:border-box;这个属性的话，就会把1px像素的边框算在总宽度百分百上这样就不会超出屏幕的宽度了。同样内边距也会算在总宽度里