• #box{
  
      width: 200px;
  
      height: 200px;
  
      background-color: pink;
  
  }

标准盒子模型

box-sizing: content-box;

• padding 是向外扩的

• border 也是向外扩的

怪异盒子模型

box-sizing: border-box;

• padding 是向内挤的，即不会影响元素的 width 和 height
  • 当 padding 大于一定程度时，就会开始影响 width 和 height

• border 也是向内挤的，也不会影响元素的 width 和 height
  • 当 border  大于一定程度时，就会开始影响 width 和 height