css 盒子模型 实际高度

在 CSS 中，盒子模型是非常重要的一个概念。盒子模型是指一个 HTML 元素所占据的空间，包括其内容（content）、内边距（padding）、边框（border）和外边距（margin）。其中，实际高度就是指元素的内容高度加上内边距和边框的高度。

实际高度 = 内容高度 + 内边距高度 + 边框高度

在设计网页时，我们需要考虑如何计算实际高度。首先，我们需要确定元素的高度。通常情况下，可以使用 CSS 的 height 属性指定元素的高度值。例如：

p {
  height: 100px;
}

然后，我们需要考虑内边距和边框对实际高度的影响。默认情况下，CSS 的盒子模型采用的是 content-Box 模式，即内容区域不包括内边距和边框的大小。因此，如果我们想要计算元素的实际高度，需要将内边距和边框的大小加上去。例如：

p {
  height: 100px;
  padding: 10px;
  border: 1px solid black;
}

这里的实际高度应该是 122px，因为内容高度为 100px，内边距和边框的高度为 22px（上下各 11px）。

需要注意的是，如果我们将盒子模型的模式改为 border-Box，则元素的实际高度就包括了内边距和边框的大小。例如：

p {
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  Box-sizing: border-Box;
}

这里的实际高度应该是 100px，因为内容高度为 78px（100px 减去上下各 11px 的内边距和边框的高度）。

在实际开发中，我们需要灵活运用盒子模型和实际高度的计算方法，以实现我们想要的效果。