平均宽度 | min-width
最小宽度
min-width CSS属性设置元素的最小宽度。它防止使用的width属性值变得小于指定的值min-width。
/* <length> value */
min-width: 3.5em;
/* <percentage> value */
min-width: 10%;
/* Keyword values */
min-width: max-content;
min-width: min-content;
min-width: fit-content;
min-width: fill-available;
/* Global values */
min-width: inherit;
min-width: initial;
min-width: unset;
当最小宽度大于最大宽度或宽度时, 元素的宽度设置为最小宽度的值。
| 初始值 | 0 |
|---|---|
| 适用于 | 所有元素，但未被替换的行内元素，表行和行组 |
| 遗传 | 没有 |
| 百分比 | 指的是包含块的宽度 |
| 媒体 | 视觉 |
| 计算值 | 指定的百分比或绝对长度 |
| 动画类型 | 一个长度，百分比或者calc（）; |
| 规范的顺序 | 形式语法定义的独特的非模糊顺序 |
语法
取值
<length>最小宽度，表示为a <length>。负值使声明无效。
关键字值
autoFlex项目的默认最小宽度，为其他布局提供比0更合理的默认宽度。
形式语法
<length> | <percentage> | auto | max-content | min-content | fit-content | fill-available
实例
table { min-width: 75%; }
form { min-width: 0; }
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Intrinsic & Extrinsic Sizing Module Level 3The definition of 'min-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 Flexible Box Layout ModuleThe definition of 'min-width' in that specification. | Candidate Recommendation | Adds the auto keyword and uses it as the initial value. |
| CSS TransitionsThe definition of 'min-width' in that specification. | Working Draft | Defines min-width as animatable. |
| CSS Level 2 (Revision 1)The definition of 'min-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.0) | 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 | 24.0 -webkit 3 | No support | 3.0 (1.9) -moz 2 | No support | No support | No support 3 |
| auto | 21.0 4 | ? | 16.0 (16.0) 4 Removed in 22.0 (22.0) Reintroduced in 34.0 (34.0) with the new behavior defined by the spec. | No support | 12.10 6 | No support |
| auto as initial value | 21.0 | (Yes) | 18.0 (18.0) Removed in 22.0 (22.0) | No support | 12.10 | No support |
| Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|---|
| Basic support | ? | ? | (Yes) | ? | ? | ? | ?5 |
| applies to <table> 1 | ? | ? | No support | ? | ? | ? | ? |
| max-content, min-content, fit-content, and fill-available | ? | ? | No support | ? | ? | ? | ? |
| auto | ? | ? | ? | ? | ? | ? | ? |
| auto as initial value | ? | ? | ? | ? | ? | ? | ? |
