《CSS世界》读书笔记（四）--宽度分离

<!-- 《CSS世界》张鑫旭著 -->

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

所谓“宽度分离原则”，就是CSS中的width属性不与影响宽度的padding/border(有时候包括margin）属性共存，也就是不能出现以下的组合：

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

或者

.box{ width:100px; padding: 20px; }

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

.father {
    width: 180px;
}

.son {
    margin: 0 20px;
    padding: 20px;
    border: 1px solid;
}

　宽度分离便于维护。当一件事情的发展可以被多个因素左右的时候，这个事情最终的结果就会变数很大而不可预期。宽度在这里也是类似，由于盒尺寸中的4个盒子都能影响宽度，自然页面元素的最终宽度就很容易发生变化而导致意想不到的布局发生。

width、padding、border混用的时候，当我们需要修改padding或者border-width的时候，就要重新计算width，而使用width分离之后，我们没有任何计算，浏览器会自动计算，完全不用担心尺寸的变化，页面结构更加稳固。

宽度分离多使用了一层标签，增加了HTML成本。

而既无需计算，又无需额外嵌套标签的实现，就是改变width作用细节的box-sizing属性。

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

box-sizing被直译为“盒尺寸”，实际上，更准确的叫法应该是“盒尺寸的作用细节”，或者说更通俗一点，叫“width作用的细节”，也就是说，box-sizing属性的作用是改变width的作用细节。

box-sizing的值有content-box、padding-box、border-box；content-box是默认值，padding-box只有Firefox曾经支持过，border-box全线支持。

为何box-sizing不支持margin-box？

没有价值！如果我们使用width或height设定好了尺寸，margin不会影响offset尺寸。

并且对于box-sizing的margin-box效果，如果是IE10及以上版本浏览器，可以试试flex布局；如果是IE8及以上版本可以使用“宽度分离”，或者特定场景下使用“格式化宽度”来实现，也就是并不是强需求。