大佬教程收集整理的这篇文章主要介绍了css3box-sizing，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

盒模型

 box-sizing: content-box; 即普通盒模型  box-sizing: border-box; 即怪异盒模型

注意：浏览器默认的是普通盒模型也就是 box-sizing:content-box;

普通盒模（标准盒模型）型的特征

 在使用border和padding之后是向外扩展的。（增加盒模型的面积，会撑开盒子）

怪异盒模型（IE盒模型）的特征

1. 怪异盒模型的border和padding是内嵌的，不增加盒模型的面积（会减少内容区的面积）。
2. 如果内部空间不够，会向外扩展。（例如一个盒子200*200，由于设置的padding+border>200那么盒子会向外扩展）  

应用场景

 例如：一个大盒子里面包含5个小盒子，每个小盒子占父盒子的20%; 这时还需要为每个小盒子设置1像素的右边距。 20% + 1 + 20% + 1 + 20% + 1 + 20% + 1 + 20% + 1 这时宽度已经超过了100% 最后一个盒子肯定会掉下去，因为浏览器默认的是普通盒模型会向外扩展，这时候我们设置父盒子box-sizing: border-box; 那么子盒子的宽度就会内嵌。

总结

1. content-box：默认值，border、padding不计算入width之内。
2. padding-box：padding计算入width之内。
3. border-box：border和padding计算入width之内

大佬总结

以上是大佬教程为你收集整理的css3box-sizing全部内容，希望文章能够帮你解决css3box-sizing所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。