CSS盒子模型：
对一个文档进行布局时，浏览器的渲染引擎会把每个元素看作是一个一个的矩形盒子，而这个盒子是由4部分组成，内容content、内边距padding、边框border、外边距margin。
content：实际内容大小，用来显示文字或图像。
padding：内边距，让边框和内容之间有间距。
border：边框，它有样式、粗细、颜色三个属性。
margin：外边距，会让自身与其他元素之间有间距。
盒子模型分为标准盒模型和怪异盒模型：
标准盒模型：盒子的宽属性就是内容content的宽度。也就是说，当给一个盒子设置了宽属性、内边距和边框，那么这个宽就只是内容的宽度，不会包含内边距和边框。即盒子的总宽度=盒子内容的width+左右padding+左右border，高度也是这样。所以，就是说padding和border就会撑大盒子。
怪异盒模型：盒子的宽属性不是内容content的宽度，而是元素的内容、内边距和边框的宽度之和。如果给一个元素设置了width属性，那么盒子的总宽度就是这个width。这个width就包含了内容content的width+左右padding+左右border。
当实际使用时，给一个盒子设置了宽高以及padding时，它的总宽高就会加上padding的值，会总体撑大盒子的尺寸，影响页面的布局。
为了解决有了padding和border撑大盒子的现象，所以CSS就提出了box-sizing:border-box（怪异盒模型）来解决，让盒子总宽高包含padding和border。
box-sizing: content-box（默认标准盒模型），它的总宽就是content内容的宽度。