CSS 中 height、max-height、min-height 优先级如何确定？-html教程-PHP中文网

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

DDD

发布： 2024-11-12 09:51:15

原创

1232人浏览过

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，优先级规则如下：

先见AI

数据为基，先见未见

查看详情

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