CSS参考手册
灵活的框布局 | Flexible Box Layout
平均宽度 | 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 |
? |
? |
? |
? |
? |
? |
? |
灵活的框布局 | Flexible Box Layout相关
层叠样式表（ Cascading Style Sheets ）是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
加载中,请稍侯......