CSS 中的 box-sizing 属性用于定义如何计算元素的总宽度和高度。默认情况下，元素的宽度和高度包括其内容、内边距和边框。但是，通过 box-sizing 属性，您可以更改此行为，以在宽度和高度计算中包含或排除填充和边框。

在旧版本的 CSS (CSS2) 中，默认方式是盒子模型的工作使元素看起来比传递给它的尺寸（宽度和高度）更大。

宽度 + 填充 + 边框 = 的实际可见/渲染宽度元素的盒子

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

CSS盒子大小属性

CSS box-sizing 属性对于调整元素布局的行为非常有用。

属性值

box-sizing CSS 属性可以有一个值，即关键字，可以是以下任一值之一:

  • content-box:这是默认值。当此值传递给 box-sizing 属性时，它返回默认行为，其中内边距或/和边框添加到元素的总宽度和高度中。

  • border-box:当此值传递给 box-sizing 属性时，它告诉浏览器调整传递给元素的填充或边距值。这会导致内容区域缩小并吸收为元素指定的边框或/和填充。这是 <table>、<select>、<button> 和 <input> 元素的默认样式。

任何浏览器都不支持 padding-box 值因此不能传递给 box-sizing 属性。

适用范围

所有接受宽度或高度的 HTML 元素。

DOM 语法

object.style.boxSizing = "content-box | border-box";

示例

这里是 CSS 属性 box-sizing: border-box:

<html> 
<head>
<style>
   .with-content-box {
      width: 200px;
      height: 100px;
      padding: 10px;
      border: 3px solid green;
      background-color: rgb(241, 234, 85);
      box-sizing: content-box;
   }
   .with-border-box {
      width: 200px;
      height: 100px;  
      padding: 10px;  
      border: 3px solid rgb(64, 10, 215);
      background-color: lightpink;
      box-sizing: border-box;
   }
</style>
</head>
<body>
   <div class="with-content-box">CONTENT BOX</div><br />
   <div class="with-border-box">BORDER BOX</div>
</body>
</html>

上面给出的示例显示了明显的区别box-sizing: border-box 和 box-sizing: content-box 属性值。这里的 box-sizing: border-box 属性在计算总宽度和高度时忽略了 padding 值。而 box-sizing: content-box 属性值在计算中包含了 padding 值。

为了平滑、流畅和直观的响应式设计， box-sizing: border-box 值可以在以下方式:

* {
   box-sizing: border-box;
}

上述语法可能不会给出所需的结果，因为它忽略了伪元素。因此，还有另一种语法，其中包含用于重置的伪元素。

*, *:before, *:after {
   box-sizing: border-box;
}

此通用框大小调整方法将使用 box-sizing: content-box |填充盒困难。因此，在这种情况下，还有一种语法可能更有用、更恰当。

html {
   box-sizing: border-box;
}
*, *:before, *:after {
   box-sizing: inherit;
}

这种通用框大小重置语法更有用，并为用户提供了更大的灵活性。

虽然当前每个浏览器都支持 box-sizing: border-box, unprefix;但一些旧版本的浏览器需要支持。为了提供该支持，您可能需要按以下方式使用前缀 -webkit 和 -moz:

html {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
*, *:before, *:after {
   -webkit-box-sizing: inherit;
   -moz-box-sizing: inherit;
   box-sizing: inherit;
}