min-width

概述

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

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

语法

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

<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).

示例

css

table {
  min-width: 75%;
}

form {
  min-width: 0;
}

规范

Specification
CSS Box Sizing Module Level 3
# min-size-properties
CSS Box Sizing Module Level 4
# sizing-values

浏览器兼容性

BCD tables only load in the browser

See also