CSS max-width用法及代码示例

CSS中的max-width属性用于定义元素的最大宽度。宽度的值不能大于max-width的值。如果内容较大，则max-width将转到下一行；如果内容较小，则max-width将无效。

用法:

max-width:none|length|initial|inherit;

属性值：

none:它是默认值，不包含max-width。

用法:

max-width:none;

例：

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

输出：
max-width property

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

用法:

max-width:length;

例：

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

输出：
max-width property

百分比(％)：此属性用于以百分比形式设置max-width。

用法:

max-width:%;

例：

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

输出：
max-width property

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

用法:

max-width:initial;

例：

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

输出：
max-width property

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

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

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

相关用法

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