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 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 值可以用来给元素设置基于其内容大小的宽度:

#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.

浏览器兼容性

BCD tables only load in the browser

参考链接