自动计算盒子的宽高， box-sizing属性介绍。

我们前端工作者在写项目的静态页面时，页面中某一部分的宽度高度是200px,此时就是指这个盒子本身的大小就是一个200*200的盒子（包括边框，内边距，外边距）。 但我们写的时候会先给盒子宽高分别是200px,然后根据项目的实际要求设置边框线和内外边距(如果此时四个内边距都是相同的宽度，会简单一些，如果每个边的宽度都不同，那就比较麻烦了)，此时盒子总体的大小就改变了。为了解决这一问题，有了box-sizing这个属性，使用最频繁的属性值是：border-box

给大家上一段代码

 .box{
            width: 200px;
            height: 200px;
            background-color: aqua;
            border: blue 1px solid;
            padding: 20px;
            box-sizing: border-box;   /*重点*/
        }

此时有了一个1px的边框线，同时还有了一个20px的内边距，如果不加box-sizing这个属性，那盒子总体的宽高应该就是242*242，那这个时候明显就不符合我们的工作需求了，如果此时通过认为的计算不仅耗费时间(在实际工作中时间是非常宝贵的，因为你每天都要固定的工作要做)，而且还有算错的可能。

        如果使用了box-sizing:border-box；这个命令，计算机就会根据宽高自动的计算好center,border,padding,margin;此时就为我们工作人员节省了很多的时间。