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

打印页面