min-width

概述

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

min-width 的值会同时覆盖 max-width 和 width。

语法

形式语法： min-width = 
  auto                                |
  <length-percentage>                 |
  min-content                         |
  max-content                         |
  fit-content( <length-percentage> )  

<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 Experimental: 固有首选宽度。
min-content Experimental: 固有最小宽度
fill-available Experimental: 包含块的宽度减去水平 margin、border 和 padding。有些浏览器在实现时使用了该关键字的早期名字： available。
fit-content Experimental: 等同于 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

min-width

概述

语法

值

Keyword values

示例

规范

浏览器兼容性

See also