box-sizing

box-sizing是CSS3的box属性之一，遵循css的盒模型(Box model)原理
css的盒模型(Box model)分为两种，第一种是W3C的标准模型，另一种是IE的传统模型
他们都是对元素计算尺寸的模型，但是计算的方式不同

W3C的标准模型：

/*content height表示元素内容高度
* content width表示元素内容宽度
*/
  /*元素空间尺寸*/
  Element空间高度 = content height + padding + border + margin
  Element 空间宽度 = content width + padding + border + margin
  /*元素大小*/
  Element Height = content height + padding + border 
  Element Width = content width + padding + border 

IE的传统模型

/*content height包含了元素内容高度，内距宽度，边框宽度
* content width包含了元素内容宽度，内距宽度，边框宽度
*/
/*元素空间尺寸*/
Element空间高度 = content height + margin
Element空间宽度 = content width + margin
/*元素大小*/
Element Height = content height
Element width = content width

box-sizing

语法：content-box | border-box | inherit

取值说明

1、content-box:此值为其默认值，即让元素维持W3C的标准盒模型，也就是说元素的宽度/高度（width/height）等于元素边框宽度（border）加上元素内边距（padding）加上元素内容宽度/高度（content width/height）

2、border-box:此值让元素维持IE传统的盒模型（IE6以下版本），也就是说元素的宽度/高度（width/height）等于元素内容的宽度/高度（content width/height）。

3、inherit: 此值让元素继承父类的box-sizing属性值

浏览器的兼容情况：
Chrome/Opera/IE（IE8版本以上） 支持 box-sizing
FireFox 支持 -moz-box-sizing
Safari 支持 -webkit-box-sizing

栗子：

结果图：

box-sizing.png

效果一的布局分析图

content-box.png

效果二的布局分析图

border-box.png

即box-sizing:content-box的元素内容宽/高等于box-sizing:border-box的元素宽/高（包含了元素内容宽度/高度，内距宽度，边框宽度）