今年4月份的一次面试，问到盒模型，是我第一次接触到盒模型，但当时不太明白，没有说清楚，后来查了下，但一知半解。
下面分享下，我对盒模型的理解：
盒模型，也就是box-sizing，分为content-box和border-box。
而content-box ： W3C标准盒模型
border-box ： IE盒模型
在宽度方面，有内容宽度，盒子实际宽度，盒子总宽度（盒子实际占据的大小）
内容宽度：
content-box : width
border-box : width+ padding-left + padding-right + border-left + border-right。
盒子实际宽度：
content-box : width + padding +border
border-box : width(包含padding和border)
比如：一个div宽度设置为500px，
在content-box下：盒子实际的宽度=500px+padding+border(500为内容宽度)；
在border-box下：盒子的实际宽度=500px(包含border和padding)。
盒子总宽度：
content-box:width+padding+border+margin
border-box:width+margin