box-sizing:该属性允许您以特定的方式定义匹配某个区域的特定元素。
IE8+、Opera 以及 Chrome 支持 box-sizing 属性。
Firefox 支持替代的 -moz-box-sizing 属性。
语法:
box-sizing:content-box|border-box|inherit
值:
content-box是默认值,平常设置的width,height值,就是指内容框。不包括内边距padding和边框border。
border-box:元素设置的宽度width和高度height决定了元素的边框盒。即设定的宽高已经包含了元素的内边距和边框。
也就是说 实际内容宽+padding+border=设定的宽width。
另:padding-box:火狐支持这个值。padding值包含在已经设定的width内。
付测试图:
代码:
火狐浏览器下:
谷歌浏览器下: