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;
        }