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. SOD框架--系统概要

    SOD框架(源PDF.NETE框架)系统概要介绍 --核心三大功能(S,O,D): SQL-MAP XML SQL config and Map DAL SQL Map Entity ORM OQL( ...

  2. 关系数据库标准语言SQL——概述

      SQL是一种介于关系代数与关系演算之间的结构化查询语言,其功能并不仅仅是查询.SQL是一个通用的.功能极强的关系数据库语言.SQL(Structured Query Language)结构化查询语 ...

  3. Scrollview嵌套Recyclerview嵌套滑动冲突，导致滑动时会出现卡顿的现象

    recyclerView.setLayoutManager(new GridLayoutManager(mContext,2){ @Override public boolean canScrollV ...

  4. MySQL中lock tables和unlock tables浅析

    MySQL中lock tables和unlock tables浅析   在MySQL中提供了锁定表(lock tables)和解锁表(unlock tables)的语法功能,ORACLE与SQL Se ...

  5. C#面向对象 类的继承

    1.类的访问权限: public:跨程序集,命名空间,必须被using引用: internal:默认当前命名空间: 2.类成员的访问权限: private:私有的,只能当前类: protecte:受保 ...

  6. mssql 怎么配置指定的表 不允许删除数据？

    http://www.maomao365.com/?p=5089 <span style="color:red;font-weight:bold;">前言: 前几天收到 ...

  7. c/c++ 重载new，delete运算符 placement new

    重载new,delete运算符 new,delete在c++中也被归为运算符,所以可以重载它们. new的行为: 先开辟内存空间 再调用类的构造函数 开辟内存空间的部分,可以被重载. delete的行 ...

  8. Windows 快捷方式（*.link）打开方式关联错误

    1.Win+r 组合键打开 “运行”,输入 “regedit” 打开 注册表 2.依次打开注册表,定位到以下位置: HKEY_CURRENT_USER\SOFTWARE\MICROSOFT\WINDO ...

  9. Ubuntu下vim打开文件时，提示请按ENTER或其它命令继续

    最近配置了一下vim,重启后,配置生效.但在用vim打开文件的时候,出现了一个问题:每次用vim打开文件的时候,都会提示请按ENTER或其它命令继续.这个真的很烦人.那么怎么把它消除掉呢? 首先要搞清 ...

  10. layui form.on('select(xxx)',function(){});绑定失败

    使用layui的form.on绑定select选中事件中, form.on()不执行, 主要原因有 1, select标签中没有写lay_filter属性,用来监听 <select id=&qu ...