height、max-height、min-height一起用时,哪个优先级高?

作者站长头像
站长
· 阅读数 15

有如下html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 父元素 -->
    <div style=" max-height: 100px; height: 300px; min-height: 200px;width: 200px;background-color: red;">
        <!-- 子元素 -->
        <div style="height: 300px; background-color: aqua;">
            
        </div>
    </div>
</body>
</html>

很好奇父元素200px是怎么来的,说明min-height生效了吗?但是如果是min-height生效了,又因为子元素300px,不是会自适应吗?height、max-height、min-height一起用时,哪个优先级高?

想知道200px怎么作用的,如果是min-height生效,那为什么父元素最后的高度不是和子元素高度一样

回复
1个回答
avatar
test
2024-06-20
max-height: 100px; 
height: 300px; 
min-height: 200px;
  • height先和maxheight比,如果大于,则此时height计算值为maxheight的值,这里为100px
  • 上面得出的结果再和min-height比,如果小于,则此时height的计算值为minHeight,这里为200px

故最后height200pxcss max-heightanswer image

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容