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 | *

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

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

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