使用带边框的max-height

Question

为什么不在此示例中max-height的框中应用？似乎边框框模式被忽略(在Chrome上测试),但似乎违反直觉.

Answer 1

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

您的填充设置为100px顶部和底部,因此你的元素的200像素height的消耗由填充.

如果指定height200px,则计算的高度将为0,因为200 - 200为0.

如果指定height201px,则计算出的高度为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.