max-width

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

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

none

元素未设置最大值

<长度>

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

<百分比>

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

max-content Experimental

The intrinsic preferred width.

min-content Experimental

The intrinsic minimum width.

fill-available Experimental

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

fit-content Experimental

与max-content等价.

none | <length-percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)
where 
<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