CSS Box Sizing

CSS 盒模型大小属性是什么？

• CSS box-sizing 属性用于指定如何计算元素的总高度和总宽度。
• 它控制着一个元素在指定了高度和宽度后的尺寸。
• 它允许你将内边距 (padding) 和边框 (border) 包含在元素的总高度和总宽度之内。

在开始讲解 CSS box-sizing 之前，让我们先了解一下如果不使用这个属性会发生什么问题。

不使用 CSS box-sizing

如果我们不包含 box-sizing 属性，那么默认情况下盒模型的工作方式如下：

这意味着如果我们创建一个具有特定高度和宽度的盒子，然后为其添加内边距和边框，它看起来会比实际宽度更宽。

为了解决这个问题，开发者需要调整高度和宽度的值，为边框和内边距腾出空间。让我们通过一个例子来理解。

示例： 让我们创建两个具有相同高度和宽度的 div，但具有不同的边框和内边距。

在上面的代码中，我们创建了两个大小相同的 div。第一个 div 没有包含内边距，而第二个 div 添加了内边距。

输出

它将生成如下输出：

从上面的输出可以看出，我们得到了两个不同大小的 div。虽然我们指定了两个 div 的尺寸相同，但第二个看起来比第一个大。

这是 CSS 盒模型 中出现的主要问题。这个问题可以通过 box-sizing 属性来解决。

使用 CSS box-sizing 属性

通过使用 CSS box-sizing 属性可以解决上述问题。现在我们将使用与上面相同的代码，但也会为其包含 box-sizing 属性。

在上面的代码中，我们使用了两个相同高度和宽度的 div，并且为每个 div 使用了 box-sizing 属性。

输出

从上面的输出中可以看到，我们得到的两个 div 宽度是相同的。

语法

box-sizing 属性的语法如下：

值： CSS box-sizing 属性有两个值：`border-box` 和 `content-box`。它们如下：

• content-box： 根据 CSS 标准，这是 box-sizing 属性的默认值。使用此值，`height` 和 `width` 属性仅包含内容，不包含外边距、内边距或边框值。这意味着，如果我们指定的元素宽度为 200px，那么内容将是 200px 宽，并且内边距和边框将在最终显示时添加，使其比 200px 更宽。例如，如果一个元素的尺寸规范如下：
  {width: 500px;
  border: 10px solid black;} 那么它将显示一个 510px 大小的盒子。

在此，尺寸值计算如下：

示例

在上面的代码中，我们使用了 box-sizing 属性的 `content-box` 值。

输出

• border-box： `border-box` 是 box-sizing 属性的一个常用值。它指示浏览器将边框和内边距包含在元素的指定高度和宽度之内。这意味着，如果我们指定的元素宽度为 200px，那么指定的边框和内边距将包含在 200px 内，并且内容框将调整以容纳额外的宽度。例如，如果一个元素的尺寸规范如下：

浏览器将显示一个 500px 大小的盒子，其中包含 480px 的内容宽度区域。

在此，宽度和高度的计算包括内容、边框和内边距。**但不包括外边距。**

元素的尺寸计算方法如下：

示例

在上面的代码中，我们使用了 box-sizing 属性的 `border-box` 值。

输出