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 |
是否是继承属性 | 否 |
Percentages | refer to the width of the containing block |
计算值 | the percentage as specified or the absolute length or none |
Animation type | a 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