学习完了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都一样
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
