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. Java 内部类及其原理

    Java中实现内部类 内部类相信大家都用过很多次了,就不说它是怎么用的了. 内部类 1.成员内部类 需要注意的是, 当成员内部类拥有和外部类同名的成员变量或这方法时, 默认情况下访问的是内部类的成员, ...

  2. MySql: Year, Quarter, Month, Day, Hour statistics

    -- 统计 select count(*) as '当天记录数' from web_product where date(p_createtime) = curdate(); select count ...

  3. BZOJ1101: [POI2007]Zap(莫比乌斯反演)

    1101: [POI2007]Zap Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 2951  Solved: 1293[Submit][Status ...

  4. C# 8.0的三个值得关注的新特性

    本文翻译自:https://dzone.com/articles/3-new-c-8-features-we-are-excited-about 转载请注明出自:葡萄城官网,葡萄城为开发者提供专业的开 ...

  5. Spring学习之旅（三）Spring工作原理初探

    详细的废话相信很多书籍视频资料都已经很多了,这里说几个小编个人认为对于理解Spring框架很重要的点.欢迎批评指正. 1)Spring的控制反转 先说说“依赖”,在面向对象程序设计中,类A中用到了类B ...

  6. Spring AOP原理(续)

    十二.AOP 1. 说出Spring的通知类型有哪些? spring共提供了五种类型的通知: 通知类型 接口 描述 Around 环绕通知 org.aopalliance.intercept.Meth ...

  7. Javascript 对象 - 数学对象

    数学对象 JavaScript中提供了math对象,math对象包含一些常用的属相和方法.Math对象与Array对象.String对象.Data对象不同,没有构造函数,因此不能创建Math对象.可直 ...

  8. C# 实现连连看功能

    本文是利用C#实现连连看的小例子,以供学习分享使用.如有不足之处,还望指正. 思路: 初始化布局(横竖十行十列,共100个单元格,每一个格一个按钮,背景图为水果图片,随机生成) . 初始化对应棋盘(用 ...

  9. 不能用notepad++编辑器编写python

    不能用notepad++编辑器编写python,因为notepad对空格支持不是很良好,会出现莫名其妙的错误!建议用vim或emacs. 有人这样解释:不要混合使用制表符和空格来缩进,因为这在跨越不同 ...

  10. elasticsearch及head插件安装与配置

    1. 环境软件版本说明 系统:ubuntu14.04.1 JDK:1.8 elasticsearch:5.5.2 node:9.11.1 elasticsearch:5.X 2. 环境软件下载说明 1 ...