盒模型是 CSS 中一个非常重要的概念，理解盒模型对于掌握 CSS 布局和样式设计至关重要。本章将详细介绍盒模型的基本概念和各种属性的使用方法。

盒模型的基本概念

盒模型是 CSS 中用来描述元素如何占据空间以及如何与其他元素进行交互的模型。每个 HTML 元素都被视为一个矩形盒子，这个盒子由内容区域、内边距（padding）、边框（border）和外边距（margin）组成。

内容区域

内容区域是元素的实际内容部分，通常由文本、图像等组成。内容区域的大小可以通过 CSS 的 width 和 height 属性来设置。

内边距（padding）

内边距是内容区域和边框之间的空间，用于控制内容与边框之间的距离。内边距可以通过 padding 属性来设置。

  1. .element {
  2.   padding: 20px; /* 为元素设置20像素的内边距 */
  3. }

边框（border）

边框是围绕内容区域和内边距的线条，可以通过 border 属性来设置边框的宽度、样式和颜色。

  1. .element {
  2.   border: 2px solid black; /* 为元素设置2像素的黑色实线边框 */
  3. }

外边距（margin）

外边距是边框外部与其他元素之间的空间，用于控制元素与其他元素之间的距离。外边距可以通过 margin 属性来设置。

  1. .element {
  2.   margin: 10px; /* 为元素设置10像素的外边距 */
  3. }

盒模型属性

box-sizing 属性

box-sizing 属性用于控制元素的盒模型计算方式。该属性有两个常用值：content-box 和 border-box。

  • content-box：默认值，元素的 width 和 height 只包括内容区域，不包括内边距、边框和外边距。
  • border-box：元素的 width 和 height 包括内容区域、内边距和边框，但不包括外边距。
  1. .element {
  2.   box-sizing: border-box; /* 设置为border-box，宽高包括边框和内边距 */
  3. }

盒模型的尺寸计算

当使用 content-box 时，元素的总宽度和高度计算公式如下：

  1. 总宽度 = 内容宽度 + 左内边距 + 右内边距 + 左边框宽度 + 右边框宽度 + 左外边距 + 右外边距
  2. 总高度 = 内容高度 + 上内边距 + 下内边距 + 上边框宽度 + 下边框宽度 + 上外边距 + 下外边距

当使用 border-box 时，元素的总宽度和高度计算公式如下：

  1. 总宽度 = 设定的宽度（包括内容、内边距和边框）
  2. 总高度 = 设定的高度（包括内容、内边距和边框）

内边距与外边距的折叠

内边距的应用

内边距用于控制元素内容与边框之间的距离。可以分别设置各个方向的内边距：

  1. .element {
  2.   padding-top: 10px;
  3.   padding-right: 15px;
  4.   padding-bottom: 20px;
  5.   padding-left: 25px;
  6. }

或者使用简写方式：

  1. .element {
  2.   padding: 10px 15px 20px 25px; /* 分别为上、右、下、左的内边距 */
  3. }

外边距的折叠与影响

外边距折叠是指当两个垂直方向的外边距相遇时，它们将合并成一个外边距，取最大者。外边距折叠主要发生在以下情况：

  • 相邻的两个块级元素之间。
  • 父元素与其第一个或最后一个子元素之间。
  • 空的块级元素。
  1. /* 父元素 */
  2. .parent {
  3.   margin-top: 20px;
  4.   margin-bottom: 20px;
  5. }
  7. /* 子元素 */
  8. .child {
  9.   margin-top: 10px;
  10.   margin-bottom: 30px;
  11. }

在上述例子中，父元素的 margin-bottom 与子元素的 margin-top 将会折叠，结果是两者中取最大者，即 30px。

通过本章的学习，你应该已经掌握了盒模型的基本概念和各种属性的使用方法。