CSS之box-sizing的应用

2017-10-12 08:28:46

在我们说box-sizing之前，我们先了解下前端经典的“盒子模型”，聪明的程序猿们巧妙的用盒子模型这一形象将枯燥的css代码表示出来：想象一个盒子，它有：外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性；这些加起来就是一个完整的元素。

但盒子模型又分为标准w3c盒模型和IE盒模型。那这有什么区别呢？

首先，标准 w3c 盒子模型的范围包括 margin、border、padding、content，其中内容content的宽度不包括padding、margin、border等部分，也就是说这个盒模型实际占用页面的宽高是内容宽高加上其他部分的宽高，即：总宽度 = margin-left border-left padding-left width padding-right border-right margin-right。

而在IE盒子模型中，内容content的宽度包含了 border 和 pading，这个盒模型实际占用页面的宽高是内容宽高加上外边距的宽高，即总宽度 = margin-left width margin-right。

在目前流行前端布局中，前端工程师默认的页面布局是采用标准的w3c盒子模型（需要在页面html声明处加上doctype 声明），告知浏览器按照标准盒模型的方式进行渲染页面。

这个时候会出现一个问题，就是元素的宽高包含了实际内容的宽高加上内外边距以及边框的宽高，如果我们想调一下内边距padding或者边框border的尺寸，那么整个元素的实际尺寸就会发生变化，随着而来的就是布局乱掉，可谓是牵一发而动全身。

但css3改变了这一现状，在CSS3中引入了box-sizing属性, 它可以允许改变默认的CSS盒模型对元素宽高的计算方式。

例如：当一个容器宽度定义为 width:100%;  之后，如果再增加 padding 或者 border 则会溢出父容器，是向外扩张的，

如果使用该样式，指定为 box-sizing: border-box; 则 padding 和 border 就不会再溢出，而是向内收缩的，这个效果感觉非常实用。特别是 input 和 textarea 等 现在设置 100% 再直接增加内边距和边框也不用再进行复杂的计算和适配了