使用带边框的max-height

Question

this example为什么不在max-height的框中应用{{1}}？似乎边框框模式被忽略（在Chrome上测试），但似乎违反直觉。

Answer 1

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

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

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

如果指定height为201px，则计算出的高度为1，等等。

来自box-sizing文档：

  

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

使用border而不是padding可以很容易地证明这一点：

#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由边界消耗。