原盒子模型

原来盒子模型是这样的

你写了一个盒子比如

.one{
   /* 最后的盒子是所有加起来的大小 */
   width: 100px;
   height: 100px;
   border: 10px;
   margin: 20px;
   padding: 10px;
}

但是我们在实际测量的时候都是直接量的成型的盒子大小，这样来回在计算会非常麻烦。

这个时候css3加入了一个属性，来控制

box-sizing

值

content-box 就是原来的算法

border-box 就是已经是所有东西都加进去的算法，然后你再加border,padding,会自动算content的大小，非常的方便