CSS 盒子模型： border-box 与 content-box 的区别

导语：
CSS 盒子模型是 Web 开发中一个至关重要的概念，它定义了元素如何占用空间并与周围元素交互。在这篇文章中，我们将探讨 box-sizing 属性，它允许我们控制元素的盒子模型，特别关注 border-box 和 content-box 两种值之间的区别。

内容

CSS 盒子模型基础

每个 HTML 元素都有一个盒子模型，它由四个部分组成：

• 内容盒： 包含元素的实际内容（文本、图像等）。
• 内边距： 内容盒周围的内空白区域。
• 边框： 围绕内边距的线条。
• 外边距： 围绕边框的外部空白区域。

默认情况下，CSS 盒子模型使用 content-box ，这意味着元素的宽度和高度仅包括其内容盒。

box-sizing 属性

box-sizing 属性允许我们指定元素的盒子模型。它有三个可能的值：

• content-box： 默认值，使用传统的 content-box 盒子模型。
• border-box： 将元素的宽度和高度设置为包含边框和内边距。
• inherit： 从父元素继承盒子模型。

border-box vs. content-box

border-box 和 content-box 之间的主要区别在于它们如何计算元素的宽度和高度：

• border-box： 元素的宽度和高度包括其内容盒、内边距和边框。
• content-box： 元素的宽度和高度仅包括其内容盒。

示例

以下示例展示了 border-box 和 content-box 之间的差异：

<div style="width: 100px; height: 100px; border: 10px solid red;">
  内容
</div>

• 如果 box-sizing：content-box ，元素的总宽度和高度为 100px（不包括边框）。
• 如果 box-sizing：border-box ，元素的总宽度和高度为 120px（包括边框）。

注意事项

在 Internet Explorer 6/7/8 中，如果缺少 DOCTYPE 声明，元素将默认使用 IE 盒子模型 。 IE 盒子模型类似于 border-box，但它也包括外边距。因此，在这些浏览器中，使用 border-box 可能会导致意外的结果。

结论

box-sizing 属性是一个强大的工具，它允许我们根据需要自定义元素的盒子模型。通过理解 border-box 和 content-box 之间的差异，我们可以准确地控制元素的布局，创建出具有预测性且一致的设计。