CSS Border Box

在 CSS 中，您可以为网页应用各种属性，使其看起来更具吸引力。每个 CSS 属性都有其值，描述了网页元素应如何显示。在了解 CSS 边框盒之前，让我们先了解一下 CSS 盒模型。

理解 CSS 盒模型

要正确理解边框盒，我们必须了解 CSS 盒模型。CSS 盒模型在网页设计中起着重要作用，用于确定网页上元素的大小和排列。

CSS 盒模型包含内容、外边距、边框和内边距。实际的盒模型如下图所示

盒模型中可以改进的一点是宽度与边框和内边距之间的关系，以及高度与边框和内边距之间的关系。

当您指定元素的宽度和高度时，这些值默认应用于内容盒。内容盒是容纳元素实际内容（可以是图像、文本等）的空间。当您对元素应用内边距和边框时，它会增加元素的大小，这可能导致意外结果。

如果将宽度设置为 100px，内边距设置为 25px，则元素实际将显示为 150px 宽，这意味着元素的大小增加了。

边框盒

`border-box` 值用于将内边距和边框包含在元素的总宽度和高度之内。

让我们通过一个示例来了解元素的最终大小是如何计算的

代码

在上面的代码中，有一个类名为“border-box”的 div 元素。该元素指定了 100px 宽度、50px 高度、25px 内边距和 2px 边框。

输出

实际高度 = 高度 + 上边框 + 下边框 + 上内边距 + 下内边距

= 50px + 2px + 2px + 25px + 25px

= 104px

实际宽度 = 宽度 + 右边框 + 左边框 + 右内边距 + 左内边距

= 100px + 2px + 2px + 25px + 25px

= 154px

添加内边距和边框后，实际高度变为 106px，实际宽度变为 156px，如下图所示。

为了避免像元素宽度和高度增加这样的意外结果，CSS 提供了 `border-box` 值，该值赋给 `box-sizing` 属性。

不使用带有 `border-box` 值的 `box-sizing` 属性

以下示例显示了不带 `box-sizing` 属性的 Element1、Element2 和 Element3。

代码

说明

在上面的代码中，我们没有使用 `box-sizing` 属性。我们创建了三个带有不同类名（如 Element1、Element2 和 Element3）的 div 元素。

Element1 样式使用以下 CSS 属性

总高度 = 100px

总宽度 = 250px

Element1 的实际高度和宽度分别为 100px 和 250px。

Element2 样式使用以下 CSS 属性

总高度 = 100px（高度）+ 3px（上边框）+ 3px（下边框）= 106px

总宽度 = 250px（高度）+ 3px（右边框）+ 3px（左边框）= 256px

向 Element2 添加边框后，元素的大小增加了。

Element3 样式使用以下 CSS 属性

总高度 = 100px（高度）+ 3px（上边框）+ 3px（下边框）+ 30px（上内边距）+ 30px（下内边距）= 166px

总宽度 = 250px（高度）+ 3px（右边框）+ 3px（左边框）+ 30px（右内边距）+ 30px（左内边距）= 316px

向 Element3 添加边框和内边距后，元素的大小变得比 Element2 的大小更大。

输出

正如您可能观察到的，即使每个元素都被分配了相同的宽度和高度，每个元素也以不同的宽度和高度显示。

Element1、Element2 和 Element3 的布局将如下图所示。每个元素可以以不同的尺寸查看。

使用带有 `border-box` 值的 `box-sizing` 属性

以下示例显示了使用 `box-sizing` 属性的 Element1、Element2 和 Element3。

代码

说明

在上面的代码中，我们使用了 `box-sizing` 属性。我们创建了三个具有不同类（如 Element1、Element2 和 Element3）的 div 元素。

Element1 样式使用以下 CSS 属性

总高度 = 150px

总宽度 = 300px

Element1 的实际高度和宽度分别为 150px 和 300px。

Element2 样式使用以下 CSS 属性

总高度 = 150px

总宽度 = 300px

即使在 Element2 中添加边框后，由于使用了值为 `border-box` 的 `box-sizing` 属性，宽度和高度仍将保持不变。

Element3 样式使用以下 CSS 属性

总高度 = 150px

总宽度 = 300px

即使在 Element3 中添加边框和内边距后，由于使用了值为 `border-box` 的 `box-sizing` 属性，宽度和高度仍将保持不变。

输出

如您所见，每个元素都具有相同的宽度和高度。即使在元素中添加边框和内边距后，也没有任何元素受到影响。边框盒将内边距和边框包含在元素的完整宽度和高度之内。

Element1、Element2 和 Element3 的布局将如下图所示。每个元素的大小保持不变。当添加边框和内边距时，它们会根据元素的宽度和高度进行调整。

结论

在本文中，您了解了 CSS 边框盒，它用于将边框和内边距保持在元素的整个高度和宽度之内。通过示例，您学习了元素在使用和不使用边框盒时的行为方式。