CSS 中 height、max-height、min-height 同时作用时，到底哪个属性起决定作用？

height、max-height、min-height 同时作用，作用规则解析

在 HTML 和 CSS 的实践中，经常会遇到 height、max-height和min-height 同时用在同一个元素上的情况。那么，它们的优先级是如何确定的呢？

以下面这段 HTML 代码为例：

<div style=" max-height: 100px; height: 300px; min-height: 200px;width: 200px;background-color: red;">
    <div style="height: 300px; background-color: aqua;">
    </div>
</div>

在此代码中，父元素同时设置了 max-height、height 和 min-height 三个属性。最终，父元素的高度是 200px，这让人感到疑惑。

优先级规则

CSS 中这三个属性优先级规则如下：

1. height 与 max-height 中较小的一个生效。
2. 上一步的结果再与 min-height 比较，取较大值。

作用过程

根据这个规则，父元素高度的计算过程如下：

1. height(300px) 和 max-height(100px) 比较，取较小值 100px。
2. 100px 和 min-height(200px) 比较，取较大值 200px。

因此，最终父元素的高度为 200px。

这个规则可以帮助我们理解当这些属性同时使用时它们如何相互作用。

以上就是CSS 中 height、max-height、min-height 同时作用时，到底哪个属性起决定作用？的详细内容，更多请关注硕下网其它相关文章！