CSS 中 height、max-height、min-height 优先级如何确定？

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《CSS 中 height、max-height、min-height 优先级如何确定？ 》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

Height、Max-Height、Min-Height 三者优先级解析

在 CSS 样式中，height、max-height 和 min-height 属性可以同时应用于元素，以控制其高度。然而，这三个属性的优先级可能会产生混淆。

示例代码

要理解这些属性的优先级，我们来看一个示例代码：

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

优先级规则

在该示例中，对于父元素的 height，优先级规则如下：

• height 先与 max-height 比较。如果 height 大于 max-height，则 height 被设置为 max-height 的值（在本例中为 100px）。
• 上一步计算出的 height 再与 min-height 比较。如果 height 小于 min-height，则 height 被设置为 min-height 的值（在本例中为 200px）。

结果

根据上述规则，父元素的最终高度被计算为 200px。这是因为：

• height（300px）大于 max-height（100px），因此 height 被设置为 100px。
• 然后，计算出的 height（100px）小于 min-height（200px），因此 height 最终被设置为 200px。

子元素高度

虽然父元素的高度被限制为 200px，但子元素的高度仍然是 300px。这是因为 CSS 中的 height 属性是容器高度，即它占用的空间。在这种情况下，父元素的高度被 min-height 限制在 200px，但子元素可以超出父元素的高度，因为 overflow 默认为 visible。

以上就是《CSS 中 height、max-height、min-height 优先级如何确定？ 》的详细内容，更多关于的资料请关注golang学习网公众号！