CSS 盒子模型

随着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