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. vue从入门到进阶：指令与事件（二）

    一.插值 v-once 通过使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新.但请留心这会影响到该节点上所有的数据绑定: span v-once>这个将不会改 ...

  2. iPhone照片格式heic图片怎么打开

    苹果自iOS11系统之后默认的是heic图片格式,在电脑和安卓中都无法直接查看,需要将其转换图片格式,那苹果heic图片怎么转换成jpg格式?下面我们一起来看看吧! 使用工具:电脑.图片 操作方法: ...

  3. 环信easeui集成：坑总结2018（二）

    环信EaseUI 集成,集成不做描述,看文档即可,下面主要谈一些对easeui的个性化需求修改. 该篇文章将解决的问题: 1.如何发送视频功能 2.未完待续.. ------------------- ...

  4. JNI NDK (AndroidStudio+CMake )实现C C++调用Java代码流程

    JNI/NDK Java调用C/C++前言  通过第三篇文章讲解在实际的开发过程中Java层调用C/C++层的处理流程.其实我们在很大的业务里也需要C/C+ +层去调用Java层,这两层之间的相互调用 ...

  5. 2059-authentication plugin 'caching_sha2_password"cnnot bt loaded :mysql8.0数据库链接不上：

    问题:最近数据库出了问题,就重新安装了数据库8.0,8.0建立数据库时出现问题,错误提示: 2059-authentication plugin 'caching_sha2_password" ...

  6. SQL 中常用存储过程xp_cmdshell运行cmd命令

    目的: 使用SQL语句,在D盘创建一个文件夹myfile 首先查询系统配置 SELECT * FROM sys.configurations WHERE name='xp_cmdshell' OR n ...

  7. [20170603]12c Top Frequency histogram.txt

    ---恢复内容开始--- [20170603]12c Top Frequency histogram.txt --//个人对直方图了解很少,以前2种直方图类型对于目前的许多应用来讲已经足够,或者讲遇到 ...

  8. HTML—标签与表格 、框架

    1.标签 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  9. 初识kafka

    简介     Kafka经常用于实时流数据架构,用于提供实时分析.本篇将会简单介绍kafka以及它为什么能够广泛应用. kafka的增长是爆炸性的.2017年超过三分之一的世界五百强公司在使用kafk ...

  10. solidity高级理论(三)：时间单位与view

    solidity高级理论(三):时间单位与view 关键字:时间单位.view.Gas优化 solidity使用自己的本地时间单位 变量 now 将返回当前的unix时间戳(自1970年1月1日以来经 ...