border-sizing之border-box、content-box

border-sizing是CSS3的属性之一,其属性值为border-box、content-box

我们正常理解的盒模型其实是border-sizing的属性值是content-box,即正常盒模型,属性值为border-box的盒模型成为怪异盒模型。她们的区别是什么呢,我们看个正常的例子就一目了然了:



  
      
      
      
  
  
    

con1盒子的模型大小为

border-sizing之border-box、content-box_第1张图片

即整个盒子的大小为width+border*2+padding*2;


而con2的盒子模型为

border-sizing之border-box、content-box_第2张图片

即100px=border*2+padding*2+内容区,内容区自适应,而设置的的宽度width是整个盒子的大小

你可能感兴趣的:(CSS/HTML)