CSS布局中，height、max-height和min-height的优先级和作用顺序如何？

height、max-height、min-height三者博弈

在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>

父元素的最终高度为200px，令人好奇的是min-height是否生效了，以及如果生效了，为什么父元素的最终高度与子元素不同。

答案

CSS属性的计算顺序遵循以下逻辑：

height先与max-height比较，若height大于max-height，则height计算值为max-height的值。
上述结果再与min-height比较，若小于min-height，则height计算值为min-height的值。

在给定的示例中：

height为300px，大于max-height为100px。
因此，height计算值变为max-height的值，即100px。
最后，100px与min-height为200px比较，发现小于200px。
因此，height最终计算值为200px。

由此可见，min-height在该示例中确实生效了，但由于max-height优先级较高，其限制了height的最大值，使得父元素的高度最终为200px，而非子元素的300px。

以上就是CSS布局中，height、max-height和min-height的优先级和作用顺序如何？的详细内容，更多请关注硕下网其它相关文章！