box-sizing的就是控制内容和内容box占用方法的

 2016-04-06 12:35

比较讨厌网上那些“标准”的话说,希望通过实例在理解 box-sizing 的作用。通过下面两个简单是实例我们来加深对这个css代码的理解。

content-box:

.test1{ box-sizing:content-box; width:200px; padding:10px; border:15px solid #eee; }

盒子实际宽度为:200+10*2+15*2
内容宽度为:200


border-box:

.test2{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; }

盒子实际宽度为:200
内容宽度为:200-10*2-15*2


总结下,也就是说box-sizing有两个属性 content-boxborder-box。默认(content-box)的盒子模型是把padding和border一起算成盒子占用的数据的,内容是靠width控制的。而改变变更为border-box属性时,盒子的实际宽度就是靠width来控制,而内容则是减去border和padding的值。这就是一个反向运算的方法。

作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。

 发表评论: