css流体布局下发宽度分离原则与box-sizing的使用

学习完了CSS世界的总结

因为默认的box-sizing:为content-box宽度作用在内容
            所以当出现
            .box{width: 100px; border:1px solid red; }或.box{width: 100px ; padding:20px}border/padding会影响宽度的属性共存的时候.box的宽带就不是我们所设置的那样
            而是 实际宽度 = width + border + padding
            实际的内容宽度 content=width； 
            那该变的方法是什么
            一.css流体布局下的宽度分离原则
            给box在设置一个父级的DIV用他来放宽度这样box就可以流动性在内部了width:auto，当在给box在设置border，padding就会在div内部改变，而不会改变box的宽度这个时候box的宽度等于父级元素的宽度就固定了；
            .father{
                width:180px;
            }
            .box{
                margin:0 20px;
                padding:0 20px;
                border:1px solid;
            }
            实际的宽度为 = 父级的宽度180px；
            实际的内容宽度 content=180-40-40-2px； 
            改变方法二
            用box-sizing，box-sizing的作用也叫width的细节(IE8要加-ms-前缀)
          因为默认的box-sizing:为content-box宽度作用在内容，所以当我们改变其属性值的时候padding-box其width就作用在padding box上面了就可以出现了想流动性自适应一样的现象;
            content = width - padding - border;
            其他：为何box-sizing不支持margin-box因为没有价值，margin只有在width：auto的时候才有用，但这个时候元素已经是处于流动性了，有没有设置box-sizing都一样