CSS盒模型-box-sizing
CSS中Box model是分为两种，第一种是W3C的标准模型，另一种是IE的传统模型
1、W3C的标准Box Model:
/*外盒尺寸计算（元素空间尺寸）*/
Element空间高度 = content height + padding + border + margin
Element 空间宽度 = content width + padding + border + margin
/*内盒尺寸计算（元素大小）*/
Element Height = content height + padding + border （Height为内容高度）
Element Width = content width + padding + border （Width为内容宽度）
2、IE)传统下Box Model（IE6以下，不含IE6版本或“QuirksMode下IE5.5+”）:
/*外盒尺寸计算（元素空间尺寸）*/
Element空间高度 = content Height + margin (Height包含了元素内容宽度，边框宽度，内距宽度)
Element空间宽度 = content Width + margin (Width包含了元素内容宽度、边框宽度、内距宽度)
/*内盒尺寸计算（元素大小）*/
Element Height = content Height(Height包含了元素内容宽度，边框宽度，内距宽度)
Element Width = content Width(Width包含了元素内容宽度、边框宽度、内距宽度)
W3C标准浏览器（Firefox,Safari,Chrome,Opera,IE6+）和传统浏览器(IE6以下版本浏览器)的Layout截图
上图中明显可以看出IE6以下版本浏览器的宽度包含了元素的padding,border值，换句话来说在IE6以下版本其内容真正的宽度是(width-padding-boder)。
语法：
box-sizing ： content-box || border-box || inherit
取值说明
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】）。
为了更能形像看出box-sizing中content-box和border-box两者的区别，我们先简单来看一人示例图，如下所示：
兼容浏览器
box-sizing现代浏览器都支持，但IE家族只有IE8版本以上才支持，虽然现代浏览器支持box-sizing，但有些浏览器还是需要加上自己的前缀，Mozilla需要加上-moz-，Webkit内核需要加上-webkit-，Presto内核-o-,IE8-ms-，所以box-sizing兼容浏览器时需要加上各自的前缀：
/*Content box*/
Element {
-moz-box-sizing: content-box; /*Firefox3.5+*/
-webkit-box-sizing: content-box; /*Safari3.2+*/
-o-box-sizing: content-box; /*Opera9.6*/
-ms-box-sizing: content-box; /*IE8*/
box-sizing: content-box; /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
}
/*Border box*/
Element {
-moz-box-sizing: border-box; /*Firefox3.5+*/
-webkit-box-sizing: border-box; /*Safari3.2+*/
-o-box-sizing: border-box; /*Opera9.6*/
-ms-box-sizing: border-box; /*IE8*/
box-sizing: border-box; /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
}
box-sizing在这两方面的运用：
一、box-sizing拯救我们的布局
为了能更好的说明问题，我们先来模仿一个两栏布局，先来看其HTML Code:
<div class="layoutDemo">
<div id="header" class="innerPadding border">Header Content</div>
<div id="content" class="clearfix">
<div id="left" class="aside innerPadding border">Left Sidebar</div>;
<div id="main-content" class="article innerPadding border">Main Content</div>
</div>
<div id="footer" class="innerPadding border"> Footer Content</div>
</div>
简单的分析一下，这里把LayoutDemo的div当作我们页中的body，而div#header是页面头部，div#left是页面左边栏，div#main-content是页面主内容，div#footer是页面的页脚，下面我们来模仿一个960的布局(比例缩小一半)，我们加上平时布局的样式上去：
.layoutDemo {
width: 960px;
background: #000;
}
#header {
width: 100%;
background: orange;
}
#left {
width: 220px;
float: left;
margin-right: 20px
background: green;
}
#main-content {
width: 720px;
float: left;
background: gray;
}
#footer {
width: 100%;
background: red;
}
效果：
到目前布局来说一点问题都没有，那是因为我们子元素宽度加起来刚好与元素的是相等，那么我们现在来变动一下，如果根据设计需要，每个块中内容都离边缘有10px的距离，那么我们先来看看基header,left,main-content,footer这几个块加一个padding:10px，看看有什么变化：
.innerPadding {
padding: 10px;
}
效果：
上图清晰告诉我们，加了一个padding,恶梦就开始来了，header,footer撑破容器伸出去了，main-content也被掉到left的下面了。跟刚才当初的效果可是完全不一样的呀，有人可能会问，如果我不使用padding我只使用border什么怎么样呢？大家猜猜会怎么样？不用猜了，马上换个代码给大家看看，我们只要把刚才的padding注掉换成border，如下所示：
.border {
border: 10px solid yellow;
}
效果：
上图是去掉了padding只加了10px的边框,同样把布局给打乱了。接着把padding和border同时加进去，反正都撑破了布局，就破罐子破摔。加上的效果如下：
不上我说，大家都知道上图是因为加上了padding和border把布局给打乱了，下面主要看如何用box-sizing来修复这个撑破的布局，前面介绍了，上图中box-sizing是取了其默认值content-box，其Box Model完全符合W3C的标准，为了修复这样的布局，我们需要把Box Model改用IE传统下的解析，这样一加，我们给他加上下面box-sizing属性：
.box-sizing {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
效果：
通过box-sizing:border-box改变了Box Model后，布局神奇般的好了，记得以前为了处理这样的问题，我们需要改变box的宽度或者在box里面在嵌套一个div，在里面的div中增加padding和border来达到这样的效果。从今天开始，我们不需要那样做了，我们只要通过box-sizing:border-box来改变Box Model回到IE的传统模式下，就可以实现了，只是有一点遗憾的是，我们IE6和IE7不支持，如果为了达到一致的效果，在加上你知道CSS Hack如何写，这样也并不难，你只要让IE6和IE7的宽度改变一下，也能达到效果：
#left {
*width:180px;
}
#right {
*width: 680px;
}
通过上面的hack，我们在IE6和IE7下也能正常显示我们的布局需求。
二、Box-sizing统一form元素风格
1、【type="submit"】、【type="reset"】、button、【type="text"】、select、textarea默认情况下都带有2px的border;
2、【type="submit"】、【type="reset"】、button默认情况下会有6px的左右padding；height在mac系统下会比在winxp win7系统下少1px,只有16px,（12px的字体时高度为17px）;
3、【type="text"】默认情况下会有1px的上下padding；WinXP和Win7下高度为15px，Mac系统下为14px
4、【type="checkbox"】默认情况下会有margin：3px 3px 3px 4px,并且宽/高度默认为13px(IE6，IE7默认大约是15px，Mac系统下只有9px)
5、【type="radio"】默认情况下会有margin: 3px 3px 0 5px的外边，并且宽/高度默认为13px（IE6,IE7默认大约是15px,Mac系统下只有9px）
6、textarea默认情况带有1px的上下margin；
解决这样的兼容问题我们可以使用CSS3的box-sizing的border-box属性。下面我截取【type="text"】的解决高度不一到致的方法，运用到表单元素上来
.submit,
.reset,
.button,
.text,
.select,
.textarea,
.checkbox,
.radio {
margin: 0;
padding: 0;
border-width: 1px;
height: 17px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.checkbox,
.radio {
width: 13px;
height: 13px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
我们来看看加上了box-sizing:border-box的layout分析图：
从Layout图明显的可以看出，现在元素的参数都统一了，但是IE6和IE7是不支持box-sizing的属性，所以为了兼容我们还需要为他们写一个hack:
.submit,
.reset,
.button,
.text,
.select,
.textarea,
.checkbox,
.radio {
margin: 0;
padding: 0;
border-width: 1px;
height: 17px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
/*这里需要减去border的值，如果padding的值不是0还需要减去padding的值，*/
*height:15px;
*width: 15px;
}
上面详细介绍了form元素如何使用box-sizing来解决浏览器兼容问题。需要提醒大家一点的是，如果你在样式中没有对border进行设置的话，那么表单中除了checkbox和radio外默认都是2px的border,这样一来你的宽度和高度在都要相应的减去4px。
转载自http://www.w3cplus.com/
