max-width

摘要

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
是否是继承属性否
Percentagesrefer to the width of the containing block
计算值the percentage as specified or the absolute length or none
Animation typea length, percentage or calc();

语法

/* <长度> 值 */
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 这是一个实验性的 API，请尽量不要在生产环境中使用它。
The intrinsic preferred width.
min-content 这是一个实验性的 API，请尽量不要在生产环境中使用它。
The intrinsic minimum width.
fill-available 这是一个实验性的 API，请尽量不要在生产环境中使用它。
The containing block width minus horizontal margin, border, and padding. Some browsers implement an ancient name for this keyword, available.
fit-content 这是一个实验性的 API，请尽量不要在生产环境中使用它。
与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 值可以用来给元素设置基于其内容大小的宽度:

#parent { background: lightblue;
          width: 300px; }

#child  { background: gold;
          width: 100%;
          max-width: -moz-fit-content;
          max-width: -webkit-fit-content;
        }

规范

Specification Status Comment
CSS Box 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! (en-US)

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 这是一个实验性的 API，请尽量不要在生产环境中使用它。 未实现 [3] 3.0 (1.9)-moz (en-US) [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.

参考链接