CSS - box-sizing 屬性

CSS box-sizing 屬性用於定義元素的總寬度和高度是如何計算的。預設情況下，元素的寬度和高度包含其內容、內邊距和邊框。但是，使用box-sizing 屬性，我們可以更改此行為，以包含或排除內邊距和邊框在寬度和高度計算中的影響。

語法

box-sizing: content-box | border-box | initial | inherit;

屬性值

值	描述
content-box	返回預設行為，其中內邊距和/或邊框會新增到元素的總寬度和高度中。預設值。
border-box	它告訴瀏覽器調整傳遞給元素的內邊距或外邊距值。這會導致內容區域縮小，並吸收為元素指定的邊框和/或內邊距。
initial	這將屬性設定為其預設值。
inherit	這從父元素繼承屬性。

CSS 盒大小屬性示例

以下示例解釋了使用不同值的box-sizing 屬性。

使用 content-box 的盒大小屬性

為了使元素的寬度依賴於為元素指定的內邊距和邊框，使得總寬度成為元素的指定寬度、內邊距和外邊距之和，我們使用content-box 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .sample-box {
         width: 200px;
         height: 100px;
         background-color: rgb(241, 234, 85);
      }

      .content-box {
         width: 200px;
         height: 100px;
         padding: 20px;
         border: 3px solid rgb(64, 10, 215);
         background-color: lightpink;
         box-sizing: content-box;
      }
   </style>
</head>

<body>
   <h2>
      CSS box-sizing property
   </h2>
   <p>
      Content-box width = specified width + 
      padding (left and right)+ border(left and right),
      so the size changes.
   </p>
   <div class="sample-box">
      SAMPLE BOX
      <p>
         This box has a width: 200px 
         padding: 0px, border: 0px, 
         total width: 200px
      </p>
   </div><br/>
   <div class="content-box">
   CONTENT BOX
      <p>
         This box has a width: 200px, 
         padding: 20px, border:3px, 
         total width: 246px, see the 
         width of this box has increased
      </p>
   </div>
</body>

</html>

使用 border-box 的盒大小屬性

為了使元素的寬度獨立於為元素指定的內邊距和邊框，使得總寬度包含內邊距和外邊距，同時仍保持指定的寬度，我們使用border-box 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .sample-box {
         width: 200px;
         height: 100px;
         background-color: rgb(241, 234, 85);
      }

      .content-box {
         width: 200px;
         height: 100px;
         padding: 4px;
         border: 3px solid rgb(64, 10, 215);
         background-color: lightgreen;
         box-sizing: border-box;
      }
   </style>
</head>

<body>
   <h2>
      CSS box-sizing property
   </h2>
   <p>
      border-box width = specified width
      (includes padding and boder), see the boxes,
      the size does not change.
   </p>
   <div class="sample-box">
      SAMPLE BOX
      <p>
         This box has a width: 200px
         padding: 0px, border:0px, 
         total width: 200px
      </p>
   </div><br/>
   <div class="content-box">
      BORDER BOX
      <p>
         This box has a width: 200px,
         padding: 4px, border:3px, 
         total width:200px
      </p>
   </div>
</body>

</html>

border-box 值的特性

由於 border-box 值不會影響元素在有無內邊距和/或邊框的情況下寬度，因此它最受開發人員歡迎，因為它避免了元素寬度計算。以下示例顯示了結構。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      *{
         box-sizing: border-box;
      }
      .sample1{
         width: 300px; 
         padding: 10px;
         border: 10px solid green;
      }
      .sample2{
         width: 300px; 
         background-color: lightblue;
      }
   </style>
</head>

<body>
   <h2>
      CSS box-sizing property
   </h2>
   <h3 class="sample1"> 
      This is a h3 heading- the width is 300px
      only despite having padding and border.
   </h3>
   <p class="sample2"> 
      This is a paragraph- the width is 300px
      without padding and border.
   </p>
</body>

</html>

支援的瀏覽器

屬性
box-sizing	10.0	8.0	29.0	5.1	9.5

css_properties_reference.htm

列印頁面