CSS3干货21：box-sizing

开学了好忙，都没时间整理自己的东西。

眼看月底了。发点自己的课堂笔记充个数~

总所周知，盒子模型标准属性都要占位。也就是 padding、border、margin 会改变标签的实际所占的宽、高。

即，标签的实际宽高应该是：

width / height  + padding + border + margin 

如：

.box{
    width: 200px;
    height: 200px;
    background: #f00;
    padding:30px;
    border:5px #000 dotted ;
    margin-left:40px;
}

代码中的 .box 实际宽度为：310px。

 width + padding-left和right +  border-left和right + margin-left 
 200 +   30*2  +  5*2 + 40  = 310

可以设置标签的 box-sizing（盒子尺寸属性） 改变这个设定。

box-sizing : content-box  |  border-box ;

值	描述
content-box	默认值。在 width 和 height 之外绘制元素的 padding 和 border。 即，padding 和 border 不占用 width、height 的值。
border-box	为元素设定的 width 和 height 决定了标签的边界。 即，padding 和 border 共用 width、height 的值。

.box{
    width: 200px;
    height: 200px;
    background: #f00;
    padding:30px;
    border:5px #000 dotted ;
    margin-left:40px;
    
    box-sizing: border-box;
}

 代码中的 .box 实际宽度为：240px。 padding 和 border 的值包含在了 width 的 200px 里。

 width + margin-left 
 200 +  40  = 240

box-sizing 的值无论是 content-box 还是 border-box，项目中的所有标签都应该统一标准。

*{
     border-sizing: border-box;
}

以上这个代码，在同一个项目中，要么写，要么就不写。

部分主流框架或网站很喜欢写这个。比如， bootstrap，CSDN。