【小记】css3中的box-sizing

box-sizing

先看语法：box-sizing:content-box,border-box,inherit

最终效果如下图（本人手绘，只为更好理解含义）：

宽度与高度的计算方法类似。

　　以下通过demo来理解：　　

.content-box{
        -webkit-box-sizing: content-box;
        width: 100px;
        height: 100px;
        border: 10px solid #C7BFE4;
        padding: 20px;
        background-color: #04A5E9;
    }
    .border-box{
        -webkit-box-sizing: border-box;
        width: 100px;
        height: 100px;
        border: 10px solid #C7BFE4;
        padding: 20px;
        background-color: #04A5E9;
    }

 运行结果（chrome中测试）：