html+css:box-sizing属性

CSS中Box model是分为两种，第一种是W3C的标准模型，另一种是IE的传统模型。

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

取值说明：

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】）。

-----------------------------------------------------------------------------------------------------------------------------

使用：将form中的元素设置为border-box。（如果你在样式中没有对border进行设置的话，那么表单中除了checkbox和radio外默认都是2px的border,这样一来你的宽度和高度在都要相应的减去4px。）