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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。