首页 > 其他 > 详细

max-height、min-height、height优先级的问题

时间:2021-04-06 14:49:47      阅读:21      评论:0      收藏:0      [点我收藏+]
<style>
      #app{
            height:1000px;
            min-height:500px;
            max-height:300px;
        }
</style>
<body>
    <div id="app">

    </div>
</body>


问div的高度为多少

经过实践得到高度为min-height即500px。

 

总结

当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

哪怕设置了!important,结果也不会变化,仍然会被覆盖

 

 

参考

https://www.jianshu.com/p/f93f74a5fb22

https://www.cnblogs.com/kunmomo/p/10600286.html

max-height、min-height、height优先级的问题

原文:https://www.cnblogs.com/-roc/p/14621569.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!