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

学习知识要善于思考，思考，再思考！今天golang学习网小编就给大家带来《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属性的计算顺序遵循以下逻辑：

1. height先与max-height比较，若height大于max-height，则height计算值为max-height的值。
2. 上述结果再与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的优先级和作用顺序如何？ 》的详细内容，更多关于的资料请关注golang学习网公众号！