max-width - CSS（层叠样式表）编辑

摘要

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

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

初始值	`none`
适用元素	all elements but non-replaced inline elements, table rows, and row groups
是否是继承属性	否
Percentages	refer to the width of the containing block
适用媒体	visual
计算值	the percentage as specified or the absolute length or `none`
Animation type	a length, percentage or calc();
正规顺序	the unique non-ambiguous order defined by the formal grammar

语法

/* <长度> 值 */
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;

可选值

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等价.

形式语法

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

例子

在下面的例子里,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;
        }

规范

Specification	Status	Comment
CSS Intrinsic & Extrinsic Sizing Module Level 3 max-width	Working Draft	Adds the `max-content`, `min-content`, `fit-content`, and `fill-available` keywords. Both CSS3 Box and CSS3 Writing Modes drafts defined at some point these keywords. These drafts are superseded by this spec.
CSS Transitions max-width	Working Draft	Defines `max-width` as animatable.
CSS Level 2 (Revision 1) max-width	Recommendation	Initial definition.

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Desktop
Mobile

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

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

[1] CSS 2.1 explicitly leaves the behavior of max-width with <table> undefined. Therefore any behavior is CSS2.1-compliant; newer CSS specifications may define this behavior, so Web developers shouldn't rely on a specific one now.

[2] Gecko experimentally implements the definitions given in CSS3 Basic Box. This one defines available and not fill-available. Also the definition of fit-content is simpler than in CSS3 Sizing.

[3] WebKit implements an earlier proposal for setting the height to an intrinsic height: the keywords intrinsic, instead of max-content, and min-intrinsic, instead of min-content There is no equivalent for fill-available or fit-content.