平均宽度 | 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>。负值使声明无效。
<percentage>最小宽度，以<percentage>包含块的宽度表示。负值使声明无效。
关键字值
autoFlex项目的默认最小宽度，为其他布局提供比0更合理的默认宽度。
max-content内在的首选宽度。
min-content内在的最小宽度。
fill-available包含块的宽度减去水平边距，边框和填充。（请注意，一些浏览器为这个关键字实现了一个古老的名字available。）
fit-content定义为min(max-content, max(min-content, fill-available))。
形式语法
<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 | ? | ? | ? | ? | ? | ? | ? |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
