box-sizing：boder-box原理

box-sizing：boder-box原理

1. 没有border、padding、margin的盒子

   <style>
       div{
           width: 200px;
           height: 200px;
           background-color: #f1f1f1;
       }
   </style>
   

   此时盒子的大小: width
   

2. 有border、padding和margin的盒子

   <style>
       div{
           width: 200px;
           height: 200px;
           padding: 10px;
           margin: 10px;
           border: 10px solid;
           background-color: #f1f1f1;
       }
   </style>
   

   此时盒子的大小: width+padding+border
   

3. 加上box-sizing:boder-box

   <style>
       div{
           width: 200px;
           height: 200px;
           padding: 10px;
           margin: 10px;
           border: 10px solid;
           box-sizing: border-box;
           background-color: #f1f1f1;
       }
   </style>
   

   此时盒子的大小：width