【css】max-height，min-height，height一起使用時，優先級問題

本文轉載自查看原文 2018-08-22 10:39 5213 css

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css中heigh、min-height和max-height的使用 CSS內部div設置上min-height或max-height滾動條就會出現在父元素上 width/height、min-width/min-height、max-width/max-height 初始值 min-height 兼容高度自適應，height與min-height 解決父級設置min-height:100%，子級設置100%無效問題【css】--html,body 設置 min-height無效 copyright底部欄定位css樣式(min-height) css 父元素設置了min-height：100%, 子元素設置height:100%無效利用height和min-height實現高度自適應