2021-10-20发表2022-10-23更新前端 / CSS3 分钟读完 (大约393个字)

CSS中height,max-height,min-height的优先级问题

height,max-height,min-height都是CSS中比较常用的属性，但关于他们的优先级却从没有认真考虑过。最开始考虑这个问题源于秋招时百度的一道笔试题，题目为问div的高度是多少？

<style>
    #app{
        height: 1000px;
        min-height: 500px;
        max-height: 300px;
    }
</style>
<body>
    <div id="app">
        
    </div>
</body>

这个问题当初并没有回答正确，在考试结束后查阅相关内容并经过实践得出的结论是：

max-height这个属性用来设置给定元素的最大高度，会阻止height属性的设置值变得比max-height更大，如果height比max-height更大则height属性会失效。简单说就是height不能比max-height更大。
max-height会覆盖掉height，但是min-height和max-height同时存在的时候又会覆盖到max-height。

实际效果有如下规律：

当height和max-height同时存在，取较小值：
- max-height < height ——> 高度以max-height为准
- max-height > height ——> 高度以height为准
当height和min-height同时存在，取较大值：
- min-height < height ——> 高度以height为准
- min-height > height ——> 高度以min-height为准
当height、min-height和max-height三者同时存在时：
- height > max-height > min-height —–> 高度以max-height为准
- height > min-height > max-height ——> 高度以min-height为准
- min-height > height > max-height ——> 高度以min-height为准

综合上述规律，我们可以得知题目的答案为500px。

作为一名前端开发人员，大家要一起努力打好基础呀！

CSS中height,max-height,min-height的优先级问题

https://zhaolei-hu.github.io/2021/10/20/CSS中height-max-height-min-height的优先级问题/

作者

胡兆磊

发布于

2021-10-20

更新于

2022-10-23

许可协议

#CSS

CSS中height,max-height,min-height的优先级问题

作者

发布于

更新于

许可协议

分类

最新文章

归档

标签