1.在正常情况下设置一个盒状模型的width时，不包括内外边距和边框，它的宽度就是它本身
html
<div class="div1"></div>
css
.div1 {
height: 200px;
width: 200px;
background: red;
}
设置了内外边距和边框后
css
.div1 {
height: 200px;
width: 200px;
background: red;
border: 50px solid black;
margin: 50px;
padding: 50px;
}
减去内边距和边框，它本身的宽度还是200，加上后是400
2.去掉边距和边框，当给盒状模型的属性加上box-sizing后
css
.div1 {
box-sizing: border-box;
height: 200px;
width: 200px;
background: red;
}
和原来没有什么差别
但是当给这个盒状模型加上边距和边框后
它的宽度还是200，并且包括了它的内边距和边框，并没有包括外边框
综上
当定义一个盒装模型的宽度时，只包含它本身的宽度，不包含边框和边距
当box-sizing的值为border-box的时候
定义一个盒状模型的宽度就已经把它的内边距和边框算在内了，扩大边框和内边距会缩小它本身的大小