box_sizing

box-sizing:border-sizing||content-sizing||inherit

取值说明

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

 

兼容浏览器

box-sizing现代浏览器都支持,但IE家族只有IE8版本以上才支持,虽然现代浏览器支持box-sizing,但有些浏览器还是需要加上自己的前缀,Mozilla需要加上-moz-,Webkit内核需要加上-webkit-,Presto内核-o-,IE8-ms-,所以box-sizing兼容浏览器时需要加上各自的前缀:著作权归作者所有。

1 -moz-box-sizing: content-box;  /*Firefox3.5+*/
2 -webkit-box-sizing: content-box; /*Safari3.2+*/
3 -o-box-sizing: content-box; /*Opera9.6*/
4 -ms-box-sizing: content-box; /*IE8*/
5 box-sizing: content-box; /*W3C标准(IE9+,Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/

 

注:IE6,IE7不支持.为了兼容还需要为他们写一个Hack

/*这里需要减去border的值,如果padding的值不是0还需要减去padding的值,*/
*height:15px; *width: 15px
box-sizing : content-box || border-box || inherit著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/content/css3-box-sizing © w3cplus.com
box-sizing : content-box || border-box || inherit著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/content/css3-box-sizing © w3cplus.com
posted @ 2017-10-17 17:31  好笑。  阅读(109)  评论(0编辑  收藏  举报