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;

浏览器支持

浏览器都支持max-width

语法

max-width:none|<length>|<percentage>|min-content|max-content|fit-content|fill-available

取值：

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

例子

<div id="parent">
    <div id="child">
        the mozilla community produces a lot of great software.
    </div>
</div>

#parent { width: 300px; }
#child  { background: gold;
          width: 100%;
          max-width: 150px;
        }

<div id="parent">
    <div id="child">
        child text
    </div>
</div>

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