标准盒模型与怪异盒模型

盒模型的组成: content + padding + border + margin
标准盒模型(默认) 标准模式下总宽度=width+margin（左右）+padding（左右）border（左右）
如 父元素设置 500px 子元素设置 478px padding设置10px border 设置 1px 所设置的padding 和 border会影响宽高
标准盒模型转换 默认或box-sizing: content-box;

 <div class="Fu">
        <div class="Son">
        </div>
    </div>
      .Fu{
        width: 500px;
        height: 500px;
        background: blue;
    }
    .Son{
        width: 478px;
        height: 478px;
        padding: 10px;
        border: 1px solid red;
    }

    <!-- 怪异盒模型  设置的div包含 padding 和 border 不影响宽高 -->
    <!-- 怪异盒模型 转换   box-sizing: border-box;-->

 <div class="Fu2">
        <div class="Son2">

        </div>
    </div>
     .Fu2{
        width: 500px;
        height: 500px;
        background-color: red;
    }
    .Son2{
        box-sizing: border-box;
        width: 500px;
        height: 500px;
        padding: 10px;
        border: 1px solid blue;
    }