CSS min-width用法及代码示例

CSS中的min-width属性用于定义元素的最小宽度。宽度的值不能小于min-width的值。如果元素内指定的内容较小，则min-width会保持指定的最小宽度。

用法:

min-width:length|initial|inherit;

属性值：

length:此属性用于设置min-width的长度。长度可以设置为px，cm等形式。

用法:

min-width:length;

例：

<!DOCTYPE html>  
<html>  
    <head>  
        <title>min-width property</title>  
          
        <!-- min-width CSS property -->
        <style>  
            p {  
                min-width:300px; 
                display:inline-block; 
                color:white; 
                background-color:green;  
            }  
        </style>  
    </head>  
      
    <body>  
        <p>  
            GeeksforGeeks:A computer science portal  
        </p>  
    </body>  
</html>

输出：

百分比(％)：用于以百分比设置最小宽度。

用法:

min-width:%;

例：

<!DOCTYPE html>  
<html>  
    <head>  
        <title>min-width property</title>  
          
        <!-- min-width CSS property -->
        <style>  
            p {  
                min-width:35%; 
                display:inline-block; 
                color:white; 
                background-color:green;  
            }  
        </style>  
    </head>  
      
    <body>  
        <p>  
            GeeksforGeeks:A computer science portal  
        </p>  
    </body>  
</html>

输出：

initial:它用于将min-width属性设置为其默认值。

用法:

min-width:initial;

例：

<!DOCTYPE html>  
<html>  
    <head>  
        <title>min-width property</title>  
          
        <!-- min-width CSS property -->
        <style>  
            p {  
                min-width:initial; 
                display:inline-block; 
                color:white; 
                background-color:green;  
            }  
        </style>  
    </head>  
      
    <body>  
        <p>  
            GeeksforGeeks:A computer science portal  
        </p>  
    </body>  
</html>

输出：

inherit:此属性是从其父级继承的。

用法:

min-width:inherit;

例：

<!DOCTYPE html>  
<html>  
    <head>  
        <title>min-width property</title>  
          
        <!-- min-width CSS property -->
        <style>  
            .gfg {  
                min-width:initial; 
                display:inline-block; 
                color:white; 
                background-color:green;  
            }  
            P { 
                min-width:inherit; 
            } 
            .geeks { 
                min-width:initial; 
                display:inline-block; 
                color:white; 
                background-color:blue;  
            } 
        </style>  
    </head>  
      
    <body>  
        <div class = "gfg"> 
            <p>  
                GeeksforGeeks:A computer science portal  
            </p>  
            <div class = "geeks">  
                GeeksforGeeks:A computer science portal  
            </div>  
        </div> 
    </body>  
</html>

输出：

支持的浏览器：下面列出了min-width属性支持的浏览器：

谷歌浏览器1.0
Internet Explorer 7.0
Firefox 1.0
Safari 2.0.2
Opera 4.0

相关用法

注：本文由纯净天空筛选整理自EnaMotwani大神的英文原创作品 CSS | min-width Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。