CSS教程

css3box-sizing

本文主要是介绍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的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!