box-sizing：border-boxing；第一次使用

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