css - 最大高度覆盖高度

Question

作为一个初级前端开发者，我很难理解什么时候使用height、min-height和max-height。

我正在阅读 MDN 上的文档关于 max-height 属性及其与 height 的结合使用。

根据文档，

max-height overrides height, but min-height overrides max-height.

但我不明白的是，如果我们有一个 div，设置一个 height 和 max-height，height 似乎优先考虑。

例如:

HTML:

<div class="wrapper">
    A text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</div>

CSS:

.wrapper { 
  width: 100px; background-color:red; height: 100px; max-height: 1000px; 
}

JSBin:https://jsbin.com/kovama/13/edit?html,css,output .

为什么 max-height 不覆盖 height ？当我删除 height 属性时，div 似乎只会增长到与内容一样大。

此外，当声明 min-height 覆盖 max-height 时，只有当 min-height 实际上大于 max-height，对吗？我觉得措辞有点困惑。

Answer 1

将 min-height 和 max-height 视为高度的最小和最大有效计算值。

所以如果你设置 min-height:100px;和最大高度:1000px；该元素的高度始终在 100 到 1000 像素之间。因此，如果将高度设置为 500px，则该值在允许范围内，并用作实际高度。

但是如果你把高度设置为2000px，那就不在允许范围内，所以高度会降低到1000px，所以在允许范围内。

但是同时设置 max-height 和以 px 为单位的高度，没有多大意义。因为那时将始终使用 max-height 和 height 中最小的那个。

正常使用是结合%和px。

如果你设置 width:100%;最大宽度:700px；然后您将宽度设置为可用空间的 100%，但更新后的宽度应该超过 700 像素。

你也可以换个方式:宽度:50%；最小宽度:500px；这将使用一半的可用空间，但始终至少使用 500 像素。