.box {
width: 200px;
height: 200px;
padding: 20px;
margin: 20px;
background: red;
border: 20px solid black;
box-sizing: border-box;
}
.box1 {
width: 200px;
height: 200px;
padding: 20px;
margin: 20px;
background: red;
border: 20px solid black;
box-sizing: content-box;
}
<div class="box"></div>
<div class="box1"></div>
来看下什么是box-sizing值：
box-sizing: content-box|border-box|inherit;
content-box在宽度和高度之外绘制元素的内边距和边框。
border-box从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit规定应从父元素继承 box-sizing 属性的值。
所以，
box.width = 200 - 20*2 - 20*2 - 20*2 (80px)
box1.width = 200 (200px)
