1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
|
---
title: max-width
slug: Web/CSS/max-width
translation_of: Web/CSS/max-width
---
<p>{{ CSSRef() }}</p>
<h2 id="摘要">摘要</h2>
<p>max-width 属性用来给元素设置最大宽度值. 定义了max-width的元素会在达到max-width值之后避免进一步按照width属性设置变大.</p>
<p>{{ Cssxref("max-width") }} 会覆盖{{cssxref("width")}}设置, 但 {{ Cssxref("min-width") }}设置会覆盖 {{ Cssxref("max-width") }}.</p>
<p>{{cssinfo}}</p>
<h2 id="语法">语法</h2>
<pre class="brush:css">/* <长度> 值 */
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;
</pre>
<h3 id="可选值">可选值</h3>
<dl>
<dt><code>none</code></dt>
<dd>元素未设置最大值</dd>
<dt><code><长度></code></dt>
<dd>请参阅{{cssxref("<length>")}}所提及的长度单位.</dd>
<dt><code><百分比></code></dt>
<dd>以父级块级容器宽度的百分比{{cssxref("<percentage>")}}作为最大宽度.</dd>
<dt><code>max-content</code>{{experimental_inline()}}</dt>
<dd>The intrinsic preferred width.</dd>
<dt><code>min-content</code>{{experimental_inline()}}</dt>
<dd>The intrinsic minimum width.</dd>
<dt><code>fill-available</code>{{experimental_inline()}}</dt>
<dd>The containing block width minus horizontal margin, border, and padding. Some browsers implement an ancient name for this keyword, <code>available</code>.</dd>
<dt><code>fit-content</code>{{experimental_inline()}}</dt>
<dd>与<code>max-content等价.</code></dd>
</dl>
<h3 id="形式语法">形式语法</h3>
{{csssyntax}}
<h2 id="例子">例子</h2>
<p>在下面的例子里,id为"child"的<div>元素设置了width值, 使它的宽度与父元素"parent"相等(100%),但是max-width值限制了它最大宽度只能到150px.</p>
<div id="basic-max-width-demo">
<pre class="brush: html"><div id="parent">
<div id="child">
The Mozilla community produces a lot of great software.
</div>
</div>
</pre>
<pre class="brush: css">#parent { width: 300px; }
#child { background: gold;
width: 100%;
max-width: 150px;
}
</pre>
</div>
<p>{{EmbedLiveSample("basic-max-width-demo", 350, 100)}}</p>
<p>fit-content 值可以用来给元素设置基于其内容大小的宽度:</p>
<div id="fit-content-demo">
<pre class="brush: html" style="display: none;"><div id="parent">
<div id="child">
Child Text
</div>
</div>
</pre>
<pre class="brush: css">#parent { background: lightblue;
width: 300px; }
#child { background: gold;
width: 100%;
max-width: -moz-fit-content;
max-width: -webkit-fit-content;
}
</pre>
</div>
<p>{{EmbedLiveSample("fit-content-demo", 400, 100)}}</p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'max-width') }}</td>
<td>{{ Spec2('CSS3 Sizing') }}</td>
<td>Adds the <code>max-content</code>, <code>min-content</code>, <code>fit-content</code>, and <code>fill-available</code> keywords.<br>
<em>Both CSS3 Box and CSS3 Writing Modes drafts defined at some point these keywords. These drafts are superseded by this spec.</em></td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'max-width') }}</td>
<td>{{ Spec2('CSS3 Transitions') }}</td>
<td>Defines <code>max-width</code> as animatable.</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'max-width') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容性</h2>
{{Compat("css.properties.max-width")}}
<h2 id="参考链接">参考链接</h2>
<ul>
<li>{{ Cssxref("width") }}, {{ Cssxref("min-width") }}, {{ Cssxref("max-height") }}</li>
<li><a href="/en/CSS/box_model" title="en/CSS/box_model">The box model</a>, {{ Cssxref("box-sizing") }}</li>
</ul>
|
