box-sizing:border-boxing的使用

<div class="box"></div>
.box {                
    margin-top: 200px;
    margin-left: 200px;
    background-color: black;
    width: 200px;
    height: 200px;
    border: 10px solid red;            
}

div.container | 220*220



box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;


div.container | 200*200
结果可以看出，使用了box-siziing:border-box之后，div把border的宽度也计算进了width和height

转载：https://blog.csdn.net/github_36496793/article/details/53065870