CSS3 - 盒子尺寸

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

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

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

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

意味着当您设置高度和宽度时，它看起来比给定的尺寸大一点，导致元素边框和填充添加到元素的高度和宽度。

CSS2 尺寸属性

现场演示 
<html>
   <head>
      <style>
         .div1 {
            width: 200px;
            height: 100px;
            border: 1px solid green;
         }
         .div2 {
            width: 200px;
            height: 100px;    
            padding: 50px;
            border: 1px solid pink;
         }
      </style>
   </head>

   <body>
      <div class = "div1">TutorialsPoint.com</div><br />
      <div class = "div2">TutorialsPoint.com</div>
   </body>
</html>

它将产生以下结果 -

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

CSS3 盒子大小属性

现场演示 
<html>
   <head>
      <style>
         .div1 {
            width: 300px;
            height: 100px;
            border: 1px solid blue;
            box-sizing: border-box;
         }
         .div2 {
            width: 300px;
            height: 100px;
            padding: 50px;
            border: 1px solid red;
            box-sizing: border-box;
         }
      </style>
   </head>

   <body>
      <div class = "div1">TutorialsPoint.com</div><br />
      <div class = "div2">TutorialsPoint.com</div>
   </body>
</html>

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

它将产生以下结果 -

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