一、W3C盒模型（标准盒模型）

通过给元素添加box-sizing: content-box;属性，可以改变元素的盒模型，让元素在计算盒子大小的时候，把元素的内边距和边框也计算进去。
标签的实际宽度 = 设置的宽度 + 内边距（padding） + 边框（border）。宽度由content组成。

二、怪异盒模型

通过给元素添加box-sizing: border-box;属性，转换为怪异盒模型。
实际宽度=设置的宽度=content+border+padding；

三、区别

主要区别：对于宽高的定义不同
w3c盒模型：设置的宽度就等于内容的宽度，增加padding和border会增加元素的占位宽度。
怪异盒模型：内容的宽度 = 设置的宽度 - border的宽度 - padding的宽度，增加padding和border不会增加元素的占位。