CSS3 Box-sizing

box-sizing是CSS3的box属性之一。遵循CSS的Box model原理，为了能更好的学习和理解这个Box-sizing属性，我们有必要先了解一下CSS中Box model的原理。
CSS中Box model是分为两种，第一种是W3C的标准模型，另一种是IE的传统模型，他们相同之处都是对元素计算尺寸的模型，具体说就是对元素的width,height,padding,border以及元素实际尺寸的计算关系；他们不同之处呢？两者的计算方法不一至：

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包含了元素内容宽度、边框宽度、内距宽度)

语法：

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现代浏览器都支持，但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标准语法)*/}

来源： http://www.w3cplus.com/content/css3-box-sizing