min-width_min-height_max-width_max-height 设置元素最小或最大长度

逃离我推掉我的手 2022-05-14 17:58 215阅读 0赞

# min-width #

版本：CSS2，设置或检索对象的最小宽度。

语法：min-width：length | percentage

适用于：除非置换内联元素，table-row, table-row-group之外的所有元素

继承性：无

动画性：当值为 length | percentage 时

length： 用长度值来定义最小宽度，不允许负值

percentage： 用百分比来定义最小宽度，不允许负值

# max-width #

版本：CSS2 ，设置或检索对象的最大宽度。

语法：max-width：length | percentage | none

适用于：除非置换内联元素，table-row, table-row-group之外的所有元素

继承性：无

动画性：当值为 length | percentage 时

none： 无最大宽度限制（默认值）

length： 用长度值来定义最大宽度，不允许负值

percentage： 用百分比来定义最大宽度，不允许负值

# min-height #

版本：CSS2 ，检索或设置对象的最小高度。

语法：min-height：length | percentage

适用于：除非置换内联元素，table-row, table-row-group之外的所有元素

继承性：无

动画性：当值为 length | percentage 时

length： 用长度值来定义最小高度，不允许负值

percentage： 用百分比来定义最小高度。不允许负值

# max-height #

版本：CSS2 ，检索或设置对象的最大高度。

语法：max-height：length | percentage | none

适用于：除非置换内联元素，table-row, table-row-group之外的所有元素

继承性：无

动画性：当值为 | 时

none： 无最小高度限制 （默认值）

length： 用长度值来定义最大高度，不允许负值

percentage： 用百分比来定义最大高度，不允许负值

# 编码示例 #

效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_27_color_FFFFFF_t_70][]

代码如下：

<!DOCTYPE html>
    <html lang="zh-cmn-Hans">
    <head>
    <meta charset="utf-8"/>
    <title>visibility 样式</title>
    <style>
        /*div1宽高为100px，图片宽高为 80px,默认图片没有填满 div1*/
        .div1 {
            width: 100px;
            height: 100px;
            background-color: #1b6d85;
            float: left;
        }
    
        /*div2宽高为100px，图片宽高为 80px,设置图片最小宽高为父容器的宽高，所以会拉伸进行填满*/
        .div2 {
            width: 100px;
            height: 100px;
            background-color: #1b6d85;
            float: left;
            margin-left: 200px;
        }
    
        .div2 img {
            /*min-width 与 min-width 只设置其中一个时，另一个会等比例进行缩放*/
            min-width: 100%;
            min-width: 100%;
        }
    
        /*div3宽高为50px，图片宽高为80px,设置图片最大宽高为父容器的宽高，所以会压缩进行填满*/
        .div3 {
            width: 50px;
            height: 50px;
            background-color: #1b6d85;
            float: left;
            margin-left: 200px;
        }
    
        .div3 img {
            /*max-width 与 max-height 只设置其中一个时，另一个会等比例进行缩放*/
            max-width: 100%;
        }
    </style>
    </head>
    <body>
    <div class="div1">
    <img src="../image/1.png">
    </div>
    <div class="div2">
    <img src="../image/1.png">
    </div>
    <div class="div3">
    <img src="../image/1.png">
    </div>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_27_color_FFFFFF_t_70]: /images/20220503/7b8088a647274efa82a206524c5f5c08.png