这篇翻译不完整。请帮忙从英语翻译这篇文章。
摘要
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 |
| 是否适用于 CSS 动画 | yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers. |
| 正规顺序 | 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- The same as
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 值可以用来给元素设置基于其内容大小的宽度:
#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. |
浏览器兼容性
| 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.