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

box-sizing虽然是css3属性，但是ie8浏览器也是支持他的，不过需要加-ms-私有前缀，但是ie9浏览器开始不需要前缀了，现在针对ie8浏览器以上的说一下，

box-sizing的作用

box-sizing就是尺寸盒子，实际上更准确的叫法应该是“盒尺寸的作用”细节，或者说的更通俗一点，叫做“width作用的细节”也就是说，box-sizing属性的作用是改变width的作用细节。那么改变了什么细节呢？一句话，改变了width作用的盒子，有个四个“内在盒子”他们分别是：content box、padding box、border box和margin box。默认情况下，width是作用在content box 上的，box-sizing的作用就是可以把width作用的盒子变成其他盒子，有以下写法：

.box{box-sizing：content-box；}/*默认值*/

.box{box-sizing：padding-box；}/*firefox曾经支持*/

.box{box-sizing：border-box；}/*全线支持*/

.box{box-sizing：margin-box；}/*从未支持过*/

用border-box属性值做对比，

可以看到，所谓的box-sizing：border-box就是让100像素的宽度直接作用在border box上，从默认的content box变成border box。此时，content box从宽度值中释放，形成了局部的流动性，和padding一起自动分配width值，于是：

.box{width：100px；box-sizing：border-box；}

宽度是100px；

.box{width：100px；box-sizing：border-box；border：1px solid；}

宽度也是100px；

.box{width：100px；box-sizing：border-box；padding：20px；border：1px solid；}

宽度还是100px；自从用了box-sizing，标签层级少了，错位问题也会不见的.