css流体布局下的宽度分离原则

宽度分离原则就是将width独立占用一层标签,而border、margin、padding利用流动性在内部自适应呈现。

为什么要宽度分离

分离是为了便于维护如下面的css

.box{
    width:100px;
    border:1px solid
}

此时.box的宽度是102px,然后设计师需要20px的留白那么现在我们需要增加padding:20px;

.box{
    width:100px;
    border:1px solid;
    padding:20px;
}

此时的.box的宽度是142px增加了40px,跟原来的宽度差异明显,显然布局容易出现问题。为了不影响之前的布局,我们需要重新计算.box的宽度。

.box{
    width:60px;
    border:1px solid;
    padding:20px;
}

如果我们使用了宽度分离原则

.father{
    width:102px;
}
.son{
    padding:20px;
    border:1px solid;
}

布局宽度还是102px,只不过子元素的context-box的宽度变为了60px;无论我们怎么改padding值,都不会影响整体布局,浏览器自动计算子元素的宽度。

但是可能会有人说宽度分离多了一层标签，产生了HTML成本。我们还有更好的一种方法,通过改变width的box-sizing属性。

改变width/height作用细节的box-sizing

box-sizing的作用是改变width的作用细节它一下几种属性

.box{box-sizing:content-box}/*默认属性*/
.box{box-sizing:border-box}/*全部支持*/

.box{
    box-sizing:border-box;
    width:100px;
}

宽度是100px;

.box{
    box-sizing:border-box;
    width:100px;
    border:1px solid;
}

现在width还是100px;
用box-sizing:border-box;方便简洁,不会产出多余的标签。
但是！！！box-sizing不支持margin属性,还是需要手动计算margin值。
使用box-sizing:border-box;不建议使用通配符*{box-sizing:border-box}设置盒模型。