CSS3 -- 盒模型（box-sizing）

1、盒模型（box model）

　　CSS中box model分两种，一是W3C标准模型，二是IE的传统模型（IE怪异模式）。

　　两种模型都是对元素计算尺寸的模型，（具体说就是对元素的width,height,padding,border以及元素实际尺寸的计算关系）。

===》W3C的标准Box Model:  标准浏览器（Firefox,Safari,Chrome,Opera,IE6+）

  /*外盒尺寸计算（元素空间尺寸）*/
  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为内容宽度）
 
===》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包含了元素内容宽度、边框宽度、内距宽度)

　　标准浏览器（Firefox,Safari,Chrome,Opera,IE6+）和传统浏览器(IE6以下版本浏览器)的Layout截图：

总结、提示：

　　上图中明显可以看出IE6以下版本浏览器的宽度包含了元素的padding,border值，换句话来说在IE6以下版本其内容真正的宽度是(width-padding-boder)。

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

　　目前浏览器大部分元素都是基于W3C标准的Box Model上，但对于form中的有部分元素还是基于传统的Box Model上，比如说input中的submit,reset,button和select等元素，这样如果我们给其设置border和padding他也只会往内延伸。

2、box-sizing 语法

box-sizing ： content-box || border-box || inherit

 ==》content-box：默认值，让元素维持W3C的标准Box Model，Element Width/Height = border+padding+content width/height。

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

3、box-sizing 兼容

　　box-sizing是CSS3的属性，兼容如下：

　　　更全兼容情况：

　　IE（ie8+支持）：-ms- ；

　　Mozilla：-moz-；

　　Webkit内核：-webkit-；

　　Presto内核：-o-。

4、box-sizing 用法

 -moz-box-sizing: content-box;
 -webkit-box-sizing: content-box;
 -o-box-sizing: content-box;
 -ms-box-sizing: content-box;
 box-sizing: content-box; 

5、Box-sizing统一form元素风格：http://www.w3cplus.com/content/css3-box-sizing

整理自：（W3CPlus）CSS3 Box-sizing