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

有如下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,不是会自适应吗?
image.png

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

阅读 829
2 个回答
max-height: 100px; 
height: 300px; 
min-height: 200px;
  • height先和maxheight比,如果大于,则此时height计算值为maxheight的值,这里为100px
  • 上面得出的结果再和min-height比,如果小于,则此时height的计算值为minHeight,这里为200px

故最后height200px
css max-height
image.png

新手上路,请多包涵

min-height优化度最高。子元素高度为300和父元素高度不一样很正常,子元素溢出了。 父元素加个overflow: hidden;你就能看到效果了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏