css、自动适配box-sizing属性

神奇的box_sizing

box-sizing 的CSS属性是为了解决传统的盒子模型不直接而产生的。
当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。

可选值

box-sizing: inherit;
box-sizing: content-box; //默认，padding内
box-sizing: border-box; //border及其内部空间

例子、没有box-sizing的时候

    
     
        
     
     
      
      
         
         
      
          
 box
  
          
  box1 
   
       
 
      
  

效果图：

box_sizing.png

如图所示，padding和border会把.box撑开，达到不到想要的效果，这是就可以使用box-sizing属性了，如下,只需为box加上box-sizing: border-box就行了，当然margin问题还是存在的，border-box意味着只会压缩border及其以内的内容，外部就管不到了。