css 3中的box-sizing属性

基本知识：

       语法：box-sizing

      取值：border-box | content-box | padding-box

说明：这个元素的功能是改变容器盒子模型的组成方式。

举例：

   1：代码

   css 部分：

     #div1{
width: 100px;height: 100px;
border:10px solid red;

padding: 20px；

background-color: yellow;
box-sizing: border-box;

}
.div2{
width: 100px;height: 100px;
border:10px solid green;

padding: 20px；
background-color: pink;
box-sizing: content-box;
}
.div3{
width: 100px;height: 100px;
border:10px solid lightgray;

padding: 20px；
background-color: blue;
box-sizing: padding-box;
}

    HTML部分

<div id="div1"></div>

<div class="div2"></div>

<div class="div3"></div>

    2：截图

    


     



 
 

 这两个可以看出它们盒子模型下的区别。

 3：解释说明

  由于我的谷歌浏览器，目前没有支持padding-box；由此可以看出content-box，它是把border（边框）和padding（内边距）的值不计算到width之内；而border-box，它是把边框和内边距的值全都计算到了width内，导致宽度减小。
总结
   border-box它是IE传统的盒子模型，它内容实际的宽高是：内容的宽度包含了你所设置的边框（border）和内边距（padding）值；而对于content-box它的值就是默认值，在浏览器下实际宽高是：内容+内边距+边框+外边距；对于border-box；在div+css布局中具有很好的利用效果，可以改变由于加大padding值导致容器撑大而打乱布局的尴尬。但是box-sizing有局限性，对于浏览器有兼容性。