max-width

max-width 属性用来给元素设置最大宽度值。定义了max-width的元素会在达到max-width值之后避免进一步按照width属性设置变大。max-width会覆盖width设置，但min-width设置会覆盖max-width。

示例

/*  值 */
max-width: 3.5em;

/*  值 */
max-width: 75%;

/* 关键字 */
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content;
max-width: fill-available;

/* 全局设置 */
max-width: inherit;
max-width: initial;
max-width: unset;

浏览器支持

语法

取值：

• none：元素未设置最大值。
• ：用长度值来定义最大宽度。不允许负值。参见。
• ：用百分比来定义最大宽度。不允许负值。以父级块级容器宽度的百分比作为最大宽度。参见。
• min-content：固有最小宽度。还处于实验阶段
• max-content：固有最大宽度。还处于实验阶段。
• fit-content：还处于实验阶段。与max-content等价。
• fill-available：包含块的宽度减去水平 margin、border 和 padding。有些浏览器在实现时使用了该关键字的早期名字： available。还处于实验阶段

例子

 
 the mozilla community produces a lot of great software. 
#parent { width: 300px; }
#child  { background: gold;
          width: 100%;
          max-width: 150px;
        }

 
 child text 
#parent { background: lightblue;width: 300px; }
#child  { background: gold;
          width: 100%;
          max-width: -moz-fit-content;
          max-width: -webkit-fit-content;
        }

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com