Css流体布局下的宽度分离原理宽度分离原理是用宽度独立占据一层标签，而border、margin、padding则利用流动性在内部自适应呈现。为什么要分开宽度呢？分开是为了维护方便。例如，下面的css.box{width:100px;border:1pxsolid}这时候的宽度。;.box{宽度:100px;边框：1px实心；padding:20px;}此时.box的宽度为142px，增加了40px，与原来的宽度明显不同。显然，布局很容易出问题。为了不影响之前的布局，我们需要重新计算.box的宽度。.box{宽度：60px;边框：1px实心；padding:20px;}如果我们使用宽度分隔原则.father{width:102px;}.son{padding:20px;border:1pxsolid;}布局宽度仍然是102px，只是子元素的context-box的宽度变成了60px；无论我们如何改变padding值，都不会影响整体布局，浏览器会自动计算出子元素的宽度。但是有人可能会说，宽度分隔增加了一层额外的标签，产生了HTML成本。我们有一个更好的方法，通过改变box-sizing属性的宽度。box-sizingbox-sizing的作用是改变width/height的细节。它有几个属性width:100px;}宽度为100px;.box{box-sizing:border-box;宽度：100px；border:1pxsolid;}现在宽度还是100px;使用box-sizing:border-box;方便简洁，不会产生多余的标签。但！！！box-sizing不支持margin属性，还是需要手动计算margin值。使用box-sizing:border-box;不推荐使用通配符*{box-sizing:border-box}来设置框模型。
