CSS3_标准盒子模型和怪异盒子模型

• #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