【css】max-height,min-height,height一起使用时,优先级问题

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

posted on 2018-08-22 10:39  smile轉角  阅读(11891)  评论(1编辑  收藏  举报

导航