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. hihoCoder编程练习赛52

    题目1 : 字符串排序 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 一般我们在对字符串排序时,都会按照字典序排序.当字符串只包含小写字母时,相当于按字母表" ...

  2. crontab架构和格式

    crontab架构图 分时日月周*****my command(可以是一个linux命令,也可以是一个脚本文件,可以是shell格式也可以是python格式,也可是java格式.....) 按照格式编 ...

  3. 设置dataGridView单元格颜色、字体、ToolTip、字体颜色

    this.dataGridView3.Rows[e.RowIndex].Cells["你的那个要判断的列名"].Style.BackColor = Color.MediumPurp ...

  4. node起步

    首先,在项目目录下创建一个叫 app.js 的文件,并写如以下代码: app.js const http = require('http'); const hostname = '127.0.0.1' ...

  5. 用js实现超链接导航菜单点击切换选中时的状态

    项目中使用到点解导航切换不同的颜色,如果只是li选项卡还好办,这次用到的超链接选项卡,因为a链接每次点击都会刷新,所以浏览器记不住点击的状态,也没法切换点击状态,因为项目中有好多地方要用到,在网上找了 ...

  6. 贝塞尔曲线与CSS3动画、SVG和canvas的应用

    简介 贝塞尔曲线是可以做出很多复杂的效果来的,比如弹跳球的复杂动画效果,首先加速下降,停止,然后弹起时逐渐减速的效果. 使用贝塞尔曲线常用的两个网址如下: 缓动函数:http://www.xuanfe ...

  7. Mixing a dll boost library with a static runtime is a really bad idea错误的解决

    作者:朱金灿 来源:http://blog.csdn.net/clever101 同事在使用boost库时遇到一个问题,在编译时出现一个错误:Mixing a dll boost library wi ...

  8. peewee基本操作

    本文将简单的介绍Peewee,一览它的主要特点,主要涉及到: 模型定义 存储数据 检索数据 注意:如果你偏爱稍微高级一点的教程, peewee建立类似twitter应用 是一篇结合Flask框架与pe ...

  9. 【Git学习二】深入了解git checkout命令

    检出命令(git checkout)是Git最常用的命令之一,同时也是一个很危险的命令,因为这条命令会重写工作区.检出命令的用法如下: 用法一:git checkout[-q][<commit& ...

  10. 常用判断重复记录的SQL语句

    1.查找表中多余的重复记录,重复记录是根据单个字段(peopleId)来判断select * from people where peopleId in (select   peopleId  fro ...