盒模型与box-sizing

盒模型这个词我们经常听到过，不过没有细细的了解。

其实我们平常都有常用盒模型就是W3C标准的盒模型，标准盒模型的是height+width+pading+border+margin,这样就组成一个盒模型。

 

盒模型分为2种：

• W3C盒模型
• IE盒模型

他们不同之处就是计算内容的宽高不同，IE盒模型宽度是包括width+pading+border，三部分组成，而W3C盒模型宽度就是witdh一部分。

 

W3C盒模型：

 

IE盒模型：

 

box-sizing这个属性有什么用呢？

其实就是方便我们在不同声明文档下来回使用W3C盒模型和IE盒模型。

属性值大概如下：

box-sizing: content-box|border-box|inherit;

 

box-sizing: content-box;看着不就是W3C的标准盒模型的计算方式么？而box-sizing: border-box;就是IE盒模型的计算方式。

 

参考链接：

https://www.jianshu.com/p/51e5bb7e9fa2