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