今年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