max-width

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

max-width 会覆盖width设置，但 min-width设置会覆盖 max-width.

none

元素未设置最大值

<长度>

请参阅<length>所提及的长度单位。

<百分比>

以父级块级容器宽度的百分比<percentage>作为最大宽度。

max-content 实验性

The intrinsic preferred width.

min-content 实验性

The intrinsic minimum width.

fill-available 实验性

The containing block width minus horizontal margin, border, and padding. Some browsers implement an ancient name for this keyword, available.

fit-content 实验性

与 max-content 等价。

max-width = 
  none                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )  

<length-percentage> = 
  <length>      |
  <percentage>  

在下面的例子里，id 为"child"的<div>元素设置了 width 值，使它的宽度与父元素"parent"相等 (100%),但是 max-width 值限制了它最大宽度只能到 150px.

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

fit-content 值可以用来给元素设置基于其内容大小的宽度：

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

• width, min-width, max-height
• The box model, box-sizing