box-sizing使用场景

盒子模型是css中一个重要的概念，其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同，先来理解下两种不同的盒子：

从上图可以看到标准 w3c 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

ie 盒子模型

从上图可以看到 ie 盒子模型的范围也包括 margin、border、padding、content，和标准 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 pading。

例：一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px，假如用标准 w3c 盒子模型解释，那么这个盒子需要占据的位置为：宽 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，盒子的实际大小为：宽 1*2+10*2+200=222px、高 1*2+10*2+50=72px；假如用ie 盒子模型，那么这个盒子需要占据的位置为：宽 20*2+200=240px、高 20*2+50=70px，盒子的实际大小为：宽 200px、高 50px。

1、考虑到盒子的大小设置会比较麻烦，有时设置的width，结果最后大小不是之前设置的大小，所以这时就要box-sizing登场了，当我们设置box-sizing:border-box以后，如果我们想要一个宽度100的盒子，直接设置width为100，就不用考虑该盒子是否为标准盒子了。这是box-sixing最实用的一个属性。等于：siting-width=border+padding+content-width;

2、当box-sizing设置成content-box后，等于标准情况：siting-width=conten-width;