css - 使用带边框的最大高度

Question

为什么在这个例子max-height中没有应用在盒子上？似乎忽略了边框模式（在 Chrome 上测试），但这似乎违反直觉。

Answer 1

该box-sizing属性不会被忽略，这正是该border-box值的行为方式：

您的填充在顶部和底部设置为 100 像素，因此 200 像素的元素height被填充消耗。

如果您指定 aheight为 200 像素，则计算的高度将为 0，因为 200 - 200 为 0。

如果您指定 aheight为 201px，则计算的高度将为 1，以此类推。

从box-sizing文档中：

内容的宽度和高度是通过从指定的“宽度”和“高度”属性中减去相应边的填充宽度来计算的。由于内容的宽度和高度不能为负数，因此此计算以 0 为底。

这很容易使用边框而不是填充来演示：

#test {
  background: #000;
  border-width: 100px 0;
  border-style: solid;
  border-color: red;
  height: 200px;
  box-sizing: border-box;
}

这里我们的元素有一个黑色背景和一个红色边框，但是由于它的高度等于顶部和底部边框宽度的总和，因此元素最终计算为 0px：

如您所见，该框完全是红色的。该元素没有高度，因此看不到黑色背景。如果我们将元素的 调整height为250px，我们最终得到：

这里元素的计算高度是 50px，所以我们看到了 50px 的背景。剩下的 200px 被边框消耗掉。