min-width

概述

min-width 属性为给定元素设置最小宽度。它可以阻止 width 属性的应用值小于 min-width 的值。

min-width 的值会同时覆盖 max-widthwidth

初始值0
适用元素all elements but non-replaced inline elements, table rows, and row groups
是否是继承属性
Percentagesrefer to the width of the containing block
适用媒体visual
计算值the percentage as specified or the absolute length
是否适用于 CSS 动画yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

形式语法: <length> | <percentage> | auto | max-content | min-content | fit-content | fill-available
min-width: 3.5em
min-width: 10%
min-width: max-content
min-width: min-content
min-width: fit-content
min-width: fill-available
min-width: inherit

<length>
固定的最小宽度。 查看 <length> 了解可用单位。负值会让该声明失效。
<percentage>
固定的最小宽度表现为包含块宽度的 <percentage> (百分比值)。负值会让该声明失效。
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 Intrinsic & Extrinsic Sizing Module Level 3
min-width
Working Draft 增加 max-contentmin-contentfit-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 初始定义。

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.0) 7.0 4.0 2.0.2 (416), buggy before
applies to <table> [1] 未实现 (Yes) 未实现 (Yes) 未实现
max-content, min-content, fit-content, and fill-available 24.0 -webkit [3] 3.0 (1.9) -moz [2] 未实现 未实现 未实现 [3]
auto已废弃 Gecko 22 21.0 16.0 (16.0) 未实现 12.10 未实现
auto as initial value已废弃 Gecko 22 21.0 18.0 (18.0) 未实现 12.10 未实现
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ? ?

注意

[1] CSS 2.1 对于 min-width 用于 <table> 时的行为未做任何定义。因此任何行为都是符合 CSS2.1 的;新的 CSS 规范可能会定义该行为,因此 Web 开发人员不应该依赖此时的规范。

[2] Gecko 试验性的实现了 CSS3 Basic Box 中给出的定义。该规范定义了 available 而不是 fill-available。同时 fit-content 的定义相比 CSS3 Intrinsic 也进行了简化。

[3] WebKit 也实现了一份早期提案,即关键字 intrinsic

See also

文档标签和贡献者