1 当一个div设置box-sizing之前
<div class="box"></div>
.box {
margin-top: 200px;
margin-left: 200px;
background-color: black;
width: 200px;
height: 200px;
border: 10px solid red;
}
效果是这样的
2 当一个div设置box-sizing之后
给css加上
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
结果可以看出,使用了box-siziing:border-box之后,div把border的宽度也计算进了width和height