随着CSS3的兴起,现在的盒模型的计算基准有两种,分别为content-box和border-box.
即box-sizing:content-box|border-box|inherit
取值说明:
1.content-box是默认值,其让元素维持W3C标准盒模型,即
Width/height(盒子的宽度/高度)=border+padding+content width/height(内容的宽度/高度).
而盒模型包含了元素的border、padding、width/height。
2.border-box:此值是让元素维持IE盒模型。即
Width/height=border+padding+content width/height(内容的宽度/高度).
而盒模型包含了元素的border、padding、width/height。
两种盒模型都包含了盒子的border、padding、content。
不同之处在于content的大小不一样。W3C标准盒模型中,width是内容content的width,不包含border和padding。而IE盒模型中,width是整个盒模型的width,包含border、padding和content的width。
示意图如下:
代码部分:
.box1 {
1. box-sizing: content-box;
2. width: 100px;
3. height: 100px;
4. background: green;
5. border: 10px solid red;
6. padding: 20px;
}
效果图与W3C标准盒模型示意图如下:
例2:
代码部分:
.box1 {
1. box-sizing: border-box;
2. width: 100px;
3. height: 100px;
4. background: green;
5. border: 10px solid red;
6. padding: 20px;
}
效果图与IE盒模型示意图如下:
兼容的浏览器如下所示:
兼容性写法如下:
box-sizing现代浏览器都支持,但IE家族只有IE8版本以上才支持,虽然现代浏览器支持box-sizing,但有些浏览器还是需要加上自己的前缀,Mozilla需要加上-moz-,Webkit内核需要加上-webkit-,Presto内核-o-,IE8-ms-,所以box-sizing兼容浏览器时需要加上各自的前缀。
附上前人代码:
/*Content box*/
Element{
-moz-box-sizing: content-box; /*Firefox3.5+*/
-webkit-box-sizing: content-box; /*Safari3.2+*/
-o-box-sizing: content-box; /*Opera9.6*/
-ms-box-sizing: content-box; /*IE8*/
box-sizing: content-box; /*W3C标准(IE9+,Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
}
/*Border box*/
Element{
-moz-box-sizing: border-box; /*Firefox3.5+*/
-webkit-box-sizing: border-box; /*Safari3.2+*/
-o-box-sizing: border-box; /*Opera9.6*/
-ms-box-sizing: border-box; /*IE8*/
box-sizing: border-box; /*W3C标准(IE9+,Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
}
详情参考CSS3Box-sizing这篇文章详解和form兼容性分析http://www.w3cplus.com/content/css3-box-sizing