标准盒子模型

默认都是标准盒子模型 box-sizing: content-box，padding、border都在width、height外边。

06.标准盒子模型和怪异盒子模型 - 图1

◼ 元素的实际占用宽度 = border + padding + width

◼ 元素的实际占用高度 = border + padding + height

怪异盒子模型

在CSS属性中 设置box-sizing: border-box 开启怪异盒子模型，也叫IE盒子模型。

06.标准盒子模型和怪异盒子模型 - 图2

◼ 元素的实际占用宽度 = width

◼ 元素的实际占用高度 = height

padding、border都在width、height里边，设置padding、border的值效果是往内挤压，元素的宽高固定不变。常用来调整父子元素中，子元素的位置，都在父元素中设置box-sizing和padding的值

举例子：往内挤压

  1.     div{
  2.       width: 100px;
  3.       height: 100px;
  4.       box-sizing: border-box;
  5.       border: 20px solid #09f;    
  6.     }
<body>
     <div></div>
</body>

举例子：

设置子元素距离父元素上边和左边各50px

     <div class="big-box">
       <div class="small-box"></div>
     </div>

    *{
      margin: 0;
      padding: 0;
    }
    .big-box{
      width: 200px;
      height: 200px;
      background-color: orange;
      /*关键代码*/
      box-sizing: border-box;
      padding-top: 50px;
      padding-left: 50px;
    }
    .small-box{
      width: 50px;
      height: 50px;
      background-color: #09f;
    }

06.标准盒子模型和怪异盒子模型 - 图3