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

百度的笔试题有一道选择题如下:问div的高度为多少

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

    </div>
</body>

这就涉及到优先级的问题,经过实践得到高度为min-height即500px。
在此经过实践,总结一些规律:

  • max-height 这个属性会阻止height属性的设置值变得比 max-height 更大。

  • max-height属性用来设置给定元素的最大高度. 如果[height] 属性设置的高度比该属性设置的高度还大,则[height] 属性会失效.

  • max-height会覆盖掉 height, 但是 min-height又会覆盖掉max-height

实际效果有以下规律:

  1. heightmax-height同时存在,取较小值,即:
    • max-height < height ------ 高度为max-height
    • max-height > height ------ 高度为height
  2. heightmin-height同时存在,取较大值,即:
    • min-height < height ------高度为height
    • min-height > height ------ 高度为min-height
  3. heightmin-heightmax-height同时存在,则:
    • height > max-height > min-height ------高度为max-height
    • height > min-height > max-height ------高度为min-height
    • min-height > height > max-height ------高度为min-height
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容