box-sizing 最主要的用法是规定容器元素的最终尺寸计算方式。
如果你创造了一个
没有设置 box-sizing 属性为 border-box(不设置的话默认值为 content-box.),同时你设置 width:100px; border:10px solid red; padding:10px; 那么最终 div 容器的实际宽度为:
100px(width)+210px(padding)+2*10px(border)=140px
所以你会得到一个比你预期(100px)还要更大的容器,结果就是会破坏网页布局。
注意:容易 margin 的尺寸不会被计算入最终容器宽度,因为对他的定义为对这个容器的留白,但不属于容器本身。
如果当我们定义一个容器的 box-sizing 属性为 border-box 时(表达式:br{box-sizing:border-box}),那么我们创建一个和上段中相同设置的
容器时,那么他的最终宽度即为 100px, 那么它的内容部分(content)的有效宽度变成了 100px-2
10px-210px =60px; 所以你会得到一个你预期大小的盒子容器,但是只是被压缩了内容部分尺寸而已,但是对于整体布局而言益处颇多。
所以要合理利用好这个属性,这个属性十分重要。