CSS3 box-sizing 属性

CSS3 box-sizing 属性

Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性。

Firefox 支持替代的 -moz-box-sizing 属性。

语法
box-sizing: content-box|border-box|inherit;

content-box
这是由 CSS2.1 规定的宽度高度行为。

宽度和高度分别应用到元素的内容框。

在宽度和高度之外绘制元素的内边距和边框。

border-box
为元素设定的宽度和高度决定了元素的边框盒。

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit 规定应从父元素继承 box-sizing 属性的值。

例子（两者都必须减去子元素外边距，或者子元素清除外边距）

           不使用box-sizing:border-box；
           默认情况下  定义行高=元素内容高度（包括边框和内边距）
           
            width: 200px;
            height: 200px;
            border: 3px dashed #999999;
            line-height: 200px; 

          使用box-sizing:border-box
 
            width: 200px;
            height: 200px;
            border: 3px dashed #999999;
            /*从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度*/
            box-sizing:border-box; 
            /*行高使文本居中，单行文本，定义行高=元素内容高度（减去边框和内边距）*/
            line-height: 194px;