五、内减盒模型

之前我们的盒模型：书写width height 再写padding border margin ，是外扩盒模型

css3新增加的内减盒模型

5.1 box-sizing:border-box

书写了width height 再设置padding border ，盒子占有不会变大，padding border是在内容宽高基础上内减的。

.box {
    width: 200px;
    height: 200px;
    padding: 50px;
    border: 10px solid #000;
    background-color: lightblue;
    /* 内减盒模型 */
    box-sizing: border-box;
}

一旦书写了box-sizing:border-box

width height 表示盒子占有的宽高

5.2 应用

应用在有边框有padding盒子的均分

.box p {
    float: left;
    /* 实际宽度50% */
    width: 50%;
    height: 200px;
    background-color: green;
    padding: 0px 50px;
    /* 内减盒模型 */
    box-sizing: border-box  ;
}