首先BOX-SIZING属性是CSS3的属性&＃xff1b;
语法&＃xff1a;
| box-sizing &＃xff1a; content-box || border-box || inherit |
取值说明
1、content-box:此值为其默认值&＃xff0c;其让元素维持W3C的标准Box Model&＃xff0c;也就是说元素的宽度/高度&＃xff08;width/height&＃xff09;等于元素边框宽度&＃xff08;border&＃xff09;加上元素内边距&＃xff08;padding&＃xff09;加上元素内容宽度/高度&＃xff08;content width/height&＃xff09;即&＃xff1a;Element Width/Height &＃61; border&＃43;padding&＃43;content width/height。
2、border-box:此值让元素维持IE传统的Box Model&＃xff08;IE6以下版本&＃xff09;&＃xff0c;也就是说元素的宽度/高度等于元素内容的宽度/高度。&＃xff08;从上面Box Model介绍可知&＃xff0c;我们这里的content width/height包含了元素的border,padding,内容的width/height【此处的内容宽度/高度&＃61;width/height-border-padding】&＃xff09;。
兼容性&＃xff1a;
box-sizing现代浏览器都支持&＃xff0c;但IE家族只有IE8版本以上才支持&＃xff0c;虽然现代浏览器支持box-sizing&＃xff0c;但有些浏览器还是需要加上自己的前缀&＃xff0c;Mozilla需要加上-moz-&＃xff0c;Webkit内核需要加上-webkit-&＃xff0c;Presto内核-o-,IE8-ms-&＃xff0c;所以box-sizing兼容浏览器时需要加上各自的前缀&＃xff1a;
Element {-moz-box-sizing: content-box; -webkit-box-sizing: content-box; -o-box-sizing: content-box; -ms-box-sizing: content-box; box-sizing: content-box; }Element {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
运用场景&＃xff1a;
那么box-sizing主要运用在哪些方面呢&＃xff1f;我总结了一下&＃xff0c;第一点就是我们布局上&＃xff0c;第二点就是表单元素上。为什么呢&＃xff1f;我想大家在平时布局中都有碰到当两个块元素的宽度刚好是其父元素总宽度时我们布局不会有任何问题&＃xff0c;但当你在其中一个块加上padding或border时&＃xff08;哪怕是1px&＃xff09;整个布局就会完全打乱&＃xff0c;因为其总宽度超过了父元素的宽度。
最后更加详细的演示过程请点击下面的链接&＃xff1a;http://blog.sina.com.cn/s/blog_877284510101kt87.html
京公网安备 11010802041100号