CSS参考手册
Miscellaneous Level 2
最大宽度 | max-width
max-width
CSS属性设置元素的最大宽度。它可以防止使用的width
属性值变得大于指定的值max-width
。
/* <length> value */
max-width: 3.5em;
/* <percentage> value */
max-width: 75%;
/* Keyword values */
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content;
max-width: fill-available;
/* Global values */
max-width: inherit;
max-width: initial;
max-width: unset;
max-width
覆盖width
,但min-width
覆盖max-width
。
Initial value |
none |
---|---|
应用对象 |
all elements but non-replaced inline elements, table rows, and row groups |
是否可继承 |
no |
百分比值 |
refer to the width of the containing block |
媒体 |
visual |
计算值 |
the percentage as specified or the absolute length or none |
动画类型 |
a length, percentage or calc(); |
规范顺序 |
the unique non-ambiguous order defined by the formal grammar |
语法
值
<length>
最大宽度,表示为 <length>
。<percentage>
最大宽度,以<percentage>
包含块的宽度表示。
关键字值
none
宽度没有最大值。
max-content
内在的首选宽度。
min-content
内在的最小宽度。
fill-available
包含块的宽度减去水平边距,边框和填充。(请注意,某些浏览器这个关键字实现一个古老的名字,available
。)
fit-content
同为max-content.
形式语法
<length> | <percentage> | none | max-content | min-content | fit-content | fill-available
实例
在本例中,“子”将为150像素宽或“父”宽度,以较小者为准:
<div id="parent">
<div id="child">
Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
</div>
</div>
#parent {
background: lightblue;
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 3The definition of 'max-width' in that specification. |
Working Draft |
Adds the max-content, min-content, fit-content, and fill-available keywords.(Both CSS3 Box and CSS3 Writing Modes drafts used to define these keywords, but are superseded by this spec.) |
CSS TransitionsThe definition of 'max-width' in that specification. |
Working Draft |
Defines max-width as animatable. |
CSS Level 2 (Revision 1)The definition of 'max-width' in that specification. |
Recommendation |
Initial definition. |
浏览器兼容性
Feature |
Chrome |
Edge |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support |
1.0 |
(Yes) |
1.0 (1.7 or earlier) |
7.0 |
4.0 |
2.0.2 (416), buggy before |
applies to <table> 1 |
No support |
No support |
(Yes) |
No support |
(Yes) |
No support |
max-content, min-content, fit-content, and fill-available |
No support 3 |
No support |
3.0 (1.9)-moz 2 |
No support |
No support |
No support 3 |
Feature |
Android |
Edge |
Firefox Mobile (Gecko) |
IE Phone |
Opera Mobile |
Safari Mobile |
---|---|---|---|---|---|---|
Basic support |
? |
(Yes) |
? |
? |
? |
? |
Miscellaneous Level 2相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。