框大小调整属性用于更改元素的高度和宽度。

从css2开始，box属性的工作方式如下所示-

width + padding + border =元素框的实际可见/渲染宽度

高度+内边距+边框=元素框的实际可见/渲染高度

意味着当您设置高度和宽度时，它看起来会稍微大一点，然后再给定尺寸，这会导致元素边界和边距增加到元素的高度和宽度中。

CSS2大小调整属性

   

   
      
TutorialsPoint.com


      
TutorialsPoint.com
   

它将产生以下结果-

上图是两个元素具有相同的宽度和高度但给定的结果不同，导致第二个包含填充属性。

CSS3框大小调整属性

   

   
      
TutorialsPoint.com


      
TutorialsPoint.com
   

上面的示例与box-sizing：border-box具有相同的高度和宽度。结果如下所示。

它将产生以下结果-

以上元素的高度和宽度与box-sizing：border-box相同，因此两个元素的结果始终相同，如上所示。