最大宽度 | max-width

最大宽度

max-width CSS属性设置元素的最大宽度。它可以防止使用的width属性值变得大于指定的值max-width。

/* <length> value */
max-width: 3.5em;

/* <percentage> value */
max-width: 75%;

/* Keyword values */
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content;
max-width: fill-available;

/* Global values */
max-width: inherit;
max-width: initial;
max-width: unset;

max-width覆盖width，但min-width覆盖max-width。

Initial value	none
应用对象	all elements but non-replaced inline elements, table rows, and row groups
是否可继承	no
百分比值	refer to the width of the containing block
媒体	visual
计算值	the percentage as specified or the absolute length or none
动画类型	a length, percentage or calc(
规范顺序	the unique non-ambiguous order defined by the formal grammar

语法

值

<length>最大宽度，表示为 <length>。<percentage>最大宽度，以<percentage>包含块的宽度表示。

关键字值

none宽度没有最大值。

形式语法

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

实例

在本例中，“子”将为150像素宽或“父”宽度，以较小者为准：

<div id="parent">
  <div id="child">
    Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
  </div>
</div>

#parent {
  background: lightblue;
  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;
}

规范

Specification	Status	Comment
CSS Intrinsic & Extrinsic Sizing Module Level 3The definition of 'max-width' in that specification.	Working Draft	Adds the max-content, min-content, fit-content, and fill-available keywords.(Both CSS3 Box and CSS3 Writing Modes drafts used to define these keywords, but are superseded by this spec.)
CSS TransitionsThe definition of 'max-width' in that specification.	Working Draft	Defines max-width as animatable.
CSS Level 2 (Revision 1)The definition of 'max-width' in that specification.	Recommendation	Initial definition.

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0	(Yes)	1.0 (1.7 or earlier)	7.0	4.0	2.0.2 (416), buggy before
applies to <table> 1	No support	No support	(Yes)	No support	(Yes)	No support
max-content, min-content, fit-content, and fill-available	No support 3	No support	3.0 (1.9)-moz 2	No support	No support	No support 3

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	(Yes)	?	?	?	?