CSS3 - Box Sizing - 極客書

Box sizing屬性用於更改元素的高度和寬度。

自css2以來，box屬性的工作方式如下所示−

width+padding+border=元素框的實際可見/呈現寬度

height+padding+border=元素框的實際可見/呈現高度

意思是當您設置高度和寬度時，它看起來比給定的大小稍大，因爲元素的高度和寬度增加了元素邊框和填充。

CSS2 sizing property

<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 box sizing property

Live Demo

<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>

上面的示例具有與框大小相同的高度和寬度：border box。結果如下所示。

它將產生以下結果&負;

上面的元素具有與框大小相同的高度和寬度：邊框框，因此兩個元素的結果始終相同，如上圖所示。