王景迁 2019-07-01
宽度分离原则就是将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属性。
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}设置盒模型。