15-box-sizing

盒子模型
  • 正常盒模型
    -width :内容所占宽度
    -height:内容所占高度
    -盒子在页面实际所占宽 = width+border*2+padding-left+padding-right
    -盒子在页面实际所占高 = height+border*2+padding-top+padding-bottom
  • 怪异盒模型(ie盒模型)
    -盒子在页面实际所占宽 = width
    -盒子在页面实际所占高 = height
  • 两种盒子模型转换
    -正常=>怪异
    加上box-sizing:border-box;
    -怪异=>正常
    加上box-sizing: content-box;


  
    
    
 

    
我要离左边有点距离

你可能感兴趣的:(15-box-sizing)