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} 设置盒模型。