CSS之Box-sizing

W3C的标准盒模型：

IE的传统盒模型：

实例：

1.W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分

2.IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading

用内外盒来说的话，W3C标准浏览器的内盒宽度等于IE6以下版本浏览器的外盒宽度

下面开始我们今天的主题——CSS3的Box-sizing：

取值说明：

1.content-box:此值为其默认值，其让元素维持W3C的标准Box Model，也就是说元素的宽度/高度（width/height）等于元素边框宽度（border）加上元素内边距（padding）加上元素内容宽度/高度（content width/height）即：Element Width/Height = border+padding+content width/height

2.border-box:此值让元素维持IE传统的Box Model（IE6以下版本），也就是说元素的宽度/高度等于元素内容的宽度/高度。（从上面Box Model介绍可知，我们这里的content width/height包含了元素的border,padding,内容的width/height【此处的内容宽度/高度=width/height-border-padding】）

3.为了更能形像看出box-sizing中content-box和border-box两者的区别，我们先简单来看一人示例图，如下所示

从图上可以看出来，给W3C盒模型的元素设置的width属性值208px就只指定content的宽度，并不包括padding和border。而给IE盒模型的元素设置相同的width值208px是包涵了padding和border的

注：box-sizing现代浏览器都支持，但IE家族只有IE8版本以上才支持，虽然现代浏览器支持box-sizing，但有些浏览器还是需要加上自己的前缀，Mozilla需要加上-moz-，Webkit内核需要加上-webkit-，Presto内核-o-,IE8-ms-，所以box-sizing兼容浏览器时需要加上各自的前缀

实例1：

上面主要介绍了box-sizing的理论知识，我们还是理论和实践结合吧，下面就一起先来看一个简单点的例子

上面效果图让大家很明显的区分开了content-box和border-box的区别了，为了更好的理解，我截了一份他们在Firebug下的一layout分析图

结论：Layout分析图再次证明了box-sizing:content-box是维持了W3C的标准Box Model，而box-sizing:border-box是维持了IE传统（IE怪异模式）下的Box Model。

那么box-sizing主要运用在哪些方面呢？我总结了一下，第一点就是我们布局上，第二点就是表单元素上。为什么呢？我想大家在平时布局中都有碰到当两个块元素的宽度刚好是其父元素总宽度时我们布局不会有任何问题，但当你在其中一个块加上padding或border时（哪怕是1px）整个布局就会完全打乱，因为其总宽度超过了父元素的宽度。第二点表单元素，前面我提到过，form有很多元素还是使用的IE传统Box Model，针对这两点，box-sizing将在其身上发挥强大的作用

实例2：box-sizing拯救我们的布局

为了能更好的说明问题，我们先来模仿一个两栏布局，先来看其HTML Code

简单的分析一下，这里把LayoutDemo的div当作我们页中的body，而div#header是页面头部，div#left是页面左边栏，div#main-content是页面主内容，div#footer是页面的页脚，下面我们来模仿一个960的布局(比例缩小一半)，我们加上平时布局的样式上去

到目前布局来说一点问题都没有，那是因为我们子元素宽度加起来刚好与元素的是相等，那么我们现在来变动一下，如果根据设计需要，每个块中内容都离边缘有10px的距离，那么我们先来看看基header,left,main-content,footer这几个块加一个padding:10px，看看有什么变化

上图清晰告诉我们，加了一个padding,恶梦就开始来了，header,footer撑破容器伸出去了，main-content也被掉到left的下面了。跟刚才当初的效果可是完全不一样的呀，有人可能会问，如果我不使用padding我只使用border什么怎么样呢？大家猜猜会怎么样？不用猜了，马上换个代码给大家看看，我们只要把刚才的padding注掉换成border，如下所示

上图是去掉了padding只加了10px的边框,同样把布局给打乱了。接着把padding和border同时加进去，反正都撑破了布局，就破罐子破摔。加上的效果如下

不上我说，大家都知道上图是因为加上了padding和border把布局给打乱了，下面主要看如何用box-sizing来修复这个撑破的布局，前面介绍了，上图中box-sizing是取了其默认值content-box，其Box Model完全符合W3C的标准，为了修复这样的布局，我们需要把Box Model改用IE传统下的解析，这样一加，我们给他加上下面box-sizing属性