关于css中盒状模型的宽度(box-sizing属性)

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的时候

定义一个盒状模型的宽度就已经把它的内边距和边框算在内了，扩大边框和内边距会缩小它本身的大小