css - 将最大高度与边框框一起使用

Question

为什么 max-height 没有应用到 this example 中的盒子上？似乎忽略了边框模式(在 Chrome 上测试过)，但这似乎违反直觉。

Answer 1

box-sizing 属性不会被忽略，这正是 border-box 值应该如何表现:

顶部和底部的内边距设置为 100 像素，因此元素的 高度 的 200 像素被内边距占用。

如果指定 height 为 200px，则计算出的高度将为 0，因为 200 - 200 为 0。

如果指定 height 为 201px，则计算出的高度将为 1，依此类推。

来自box-sizing文档:

The content width and height are calculated by subtracting the padding widths of the respective sides from the specified ‘width’ and ‘height’ properties. As the content width and height cannot be negative, this computation is floored at 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 被边框占用。