盒模型：（内容（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像素的边框算在总宽度百分百上这样就不会超出屏幕的宽度了。同样内边距也会算在总宽度里