MDN说法：

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

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

max-height 重载（覆盖掉） height, 但是 min-height 又会重载（覆盖掉） max-height.

实际效果：

　　当 height 和 max-height一起使用时，谁小听谁的

　　max-height  <   height     元素高度：   max-height

　   　　height  <  max-height      元素高度：    height

　　当 height,max-height,min-height一起使用时

　　height  > max-height > min-height          元素高度：max-height

　　height  >  min-height > manx-height       元素高度：min-height

　　min-height > height > max-height           元素高度：min-height

范例：

html

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>max-height、 min-height、 height 一起使用</title>

    <style>

        ul{

            list-style:none;

            padding:0;

        }

        .clearfix{

            clear:both;

            content:'';

            display: block;

        }

        .clearfix:after{

            content:'';

            clear:both;

            display:block;

        }

        .clearfix{

            zoom:1;

        }

        .fl {

            float:left;

            display:inline;

        }

        .fr {

            float:right;

        }

        .wrap{

            width:200px;

            margin-left:20px;

        }

        .box{

            height:500px;

            background-color:#e64c65;

        }

        .box2{

            height:500px;

            max-height:300px;

            background-color:rgb(169, 173, 233);

        }

        .box3{

            height:500px;

            max-height:600px;

            background-color:rgb(199, 69, 166);

        }

        .box4{

            height:500px;

            max-height:300px;

            min-height:200px;

            background-color:#ccc;

        }

        .box5{

            height:500px;

            max-height:300px;

            min-height:400px;

            background-color:#ccc;

        }

        .box6{

            height:500px;

            max-height:300px;

            min-height:600px;

            background-color:#ccc;

        }

    </style>

</head>

<body>

    <div class="clearfix">

        <div class="box wrap fl">

            <ul>

                <li>原：width:200</li>

                <li>原：height:500</li>

                <li>实：width:100</li>

                <li>实：height:500</li>

            </ul>

        </div>

        <div class="box2 wrap fl">

            <ul>

                <li>原：width:200</li>

                <li>原：height:500</li>

                <li>原：max-height:300</li>

                <li>实：width:100</li>

                <li>实：height:300</li>

            </ul>

        </div>

        <div class="box3 wrap fl">

            <ul>

                <li>原：width:200</li>

                <li>原：height:500</li>

                <li>原：max-height:600</li>

                <li>实：width:100</li>

                <li>实：height:500</li>

            </ul>

        </div>

        <div class="box4 wrap fl">

            <ul>

                <li>原：width:200</li>

                <li>原：height:500</li>

                <li>原：max-height:300</li>

                <li>原：min-height:200</li>

                <li>实：width:100</li>

                <li>实：width:300</li>

            </ul>

        </div>

        <div class="box5 wrap fl">

            <ul>

                <li>原：width:200</li>

                <li>原：height:500</li>

                <li>原：max-height:300</li>

                <li>原：min-height:400</li>

                <li>实：width:100</li>

                <li>实：width:400</li>

            </ul>

        </div>

        <div class="box6 wrap fl">

            <ul>

                <li>原：width:200</li>

                <li>原：height:500</li>

                <li>原：max-height:300</li>

                <li>原：min-height:600</li>

                <li>实：width:100</li>

                <li>实：width:600</li>

            </ul>

        </div>

    </div>

</body>

</html>

效果：

参考链接：https://developer.mozilla.org/zh-CN/docs/CSS/max-height

作者：smile.轉角

QQ：493177502

【css】max-height，min-height，height一起使用时，优先级问题的更多相关文章

  1. 真正的能理解CSS中的line-height，height与line-height

    https://blog.csdn.net/a2013126370/article/details/82786681 在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次 ...

  2. css height:100%和height:auto的区别

    css height:100%和height:auto的区别 height:auto,是指根据块内内容自动调节高度.height:100%,是指其相对父块高度而定义的高度,也就是按照离它最近且有定义高 ...

  3. height:100%与height：inherit的区别

    一.兼容性 首先,inherit这个属性只是在ie8+才支持:100%支持ie6: 二.大多数情况下没有区别 在正常情况下height:100%与height:inherit没有任何区别: 1.父元素 ...

  4. 网页上弹出pop窗口实例，(document).height()与$(window).height()的区别

    #dvbg{background-color:#666666; position:absolute; z-index:99; left:0; top:0; display:none; width:10 ...

  5. height:100%和height:auto的区别

    一直不明白height:100%和height:auto的区别,最近在制作前端页面时都用了height:100%;overflow:hidden; ,可是有些浏览器出现莫名的奇妙的问题,但换成heig ...

  6. $(document).height()、$("body").height()、$(window).height()区别和联系

    前言:在此以高度为示例,宽度问题可类推.在移动端开发中,经常遇到需要把一块内容定位于底部的情况,当页面内容不满一屏时,需要设为fixed,而超过 一屏时,需要设为static随页面顶到底部,此时就需要 ...

  7. $(window).height() 和 $(document).height()的区别

    $(window).height() 和 $(document).height()的区别 $(window).height()代表了当前可见区域的大小,$(document).height()则代表了 ...

  8. 页面上有3个输入框：分别为max，min，num；三个按钮：分别为生成，排序，去重；在输入框输入三个数字后，先点击生成按钮，生成一个数组长度为num，值为max到min之间的随机整数点击排序，对当前数组进行排序，点击去重，对当前数组进行去重。 每次点击之后使结果显示在控制台

    <!DOCTYPE html> <html> <head> <!-- 页面上有3个输入框:分别为max,min,num:三个按钮:分别为生成,排序,去重: 在 ...

  9. 【MySQL】汇总数据 - avg()、count()、max()、min()、sum()函数的使用

    第12章 汇总数据 文章目录 第12章 汇总数据 1.聚集函数 1.1.AVG()函数 avg() 1.2.COUNT()函数 count() 1.3. MAX()函数 max() 1.4.MIN() ...

随机推荐

  1. MVC模式-----struts2框架（2）

    MVC模式-----struts2框架 第一个struts2程序 struts2框架是通过一个过滤器将struts2集成到Web应用程序中的,这个过滤器的对象是StrutsprepareAndExec ...

  2. 在 ELK Docker 容器中查看，删除索引

    使用 Docker 搭建好 ELK ( https://www.cnblogs.com/klvchen/p/9268510.html ) 环境后,如需查看 elasticsearch 的索引可采取以下 ...

  3. JavaScript之Number、String、Array常用属性与方法手册

    Number isFinite函数 Number.isFinite() 方法用来检测传入的参数是否是一个有穷数(finite number). 语法: Number.isFinite(value) 例 ...

  4. 如何用JavaScript判断dom是否有存在某class的值？

    例如: <html class="no-js"> <head> </head> <body> </body> </ ...

  5. [20170607]再论Private Strand Flush Not Complete.txt

    [20170607]再论Private Strand Flush Not Complete.txt --//曾经跟zergduan有过讨论,链接www.itpub.net/thread-2065703 ...

  6. ArcGIS Server10.2 集群部署注意事项

    不接触Server很久了,最近一个省级项目需要提交一个部署方案,由于是省级系统,数据.服务数量都较大,需要考虑采用Server集群的方式来实现.在网上搜罗了以下Server集群的资料,按照步骤一步步来 ...

  7. c/c++ lambda 表达式 剖析

    lambda 表达式 剖析 大前提:捕获列表里变量的确定时机. 捕获列表和参数列表有区别,捕获列表里的变量,是在捕获的时间点就确定了,而不是在lambda调用时确定,参数列表是在调用时才确定.所以当捕 ...

  8. c/c++ 图相关的函数(二维数组法）

    c/c++ 图相关的函数(二维数组法) 遍历图 插入顶点 添加顶点间的线 删除顶点 删除顶点间的线 摧毁图 取得与v顶点有连线的第一个顶点 取得与v1顶点,v1顶点之后的v2顶点的之后的有连线的第一个 ...

  9. c/c++ 线性表之单向循环链表

    c/c++ 线性表之单向循环链表 线性表之单向循环链表 不是存放在连续的内存空间,链表中的每个节点的next都指向下一个节点,最后一个节点的下一个节点不是NULL,而是头节点.因为头尾相连,所以叫单向 ...

  10. PHP中判断变量是否存在的方式

    isset()函数判断变量是否设置. thinkPHP中判断select查询时返回值是否为空  $object->isEmpty() empty():当变量存在,并且是一个非空非零的值时,返回 ...