min-width - CSS(层叠样式表) 编辑
概述
min-width
属性为给定元素设置最小宽度。它可以阻止 width
属性的应用值小于 min-width
的值。
min-width 的值会同时覆盖
max-width
和 width
。
语法
形式语法: auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where
<length-percentage> = <length> | <percentage>
/* <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
值
<length>
- 固定的最小宽度。 查看
<length>
了解可用单位。负值会让该声明失效。 <percentage>
- 固定的最小宽度表现为包含块宽度的
<percentage>
(百分比值)。负值会让该声明失效。
Keyword values
auto
- 用于弹性元素的默认最小宽度。相比其他布局中以
0
为默认值,auto
能为弹性布局指明更合理的默认表现。 max-content
- 固有首选宽度。
min-content
- 固有最小宽度
fill-available
- 包含块的宽度减去水平 margin、border 和 padding。有些浏览器在实现时使用了该关键字的早期名字:
available
。 fit-content
- 等同于
min(max-content, max(min-content, fill-available)
.
示例
table { min-width: 75%; }
form { min-width: 0; }
规范
Specification | Status | Comment |
---|---|---|
CSS Box Sizing Module Level 3 min-width | Working Draft | 增加 max-content , min-content , fit-content , 和fill-available 关键字。CSS3 Box 与 CSS3 Writing Modes 两份草案在某种程度上定义了这些关键字。本草案取代了这些草案。 |
CSS Flexible Box Layout Module min-width | Candidate Recommendation | 早期的修订规范 增加了 auto 关键字并将其作为初始值。然而 CSSWG 随后重置了这一变更。直至2013 年 3月 29日,最新的 编辑草案 没有对min-width 属性做任何修改(也就是说 auto 值已经不被推荐 )。 |
CSS Transitions min-width | Working Draft | 定义 min-width 为动画属性。 |
CSS Level 2 (Revision 1) min-width | Recommendation | 初始定义。 |
浏览器兼容性
BCD tables only load in the browser
See also
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论