自动 | auto

auto

width 属性指定了元素内容区的宽度。默认情况下，该属性定义了内容区域的宽度。如果box-sizing设置为border-box，则确定边框区域的宽度。

/* <length> values */
width: 300px;
width: 25em;

/* <percentage> value */
width: 75%;

/* Keyword values */
width: 25em border-box;
width: 75% content-box;
width: max-content;
width: min-content;
width: available;
width: fit-content;
width: auto;

/* Global values */
width: inherit;
width: initial;
width: unset;

在min-width和max-width属性覆盖width。

初始值	auto
适用元素	all elements but non-replaced inline elements, table rows, and row groups
是否是继承属性	no
Percentages	refer to the width of the containing block
适用媒体	visual
计算值	a percentage or auto or the absolute length
Animation type	a length, percentage or calc(
正规顺序	the length or percentage before the keyword, if both are present

语法

width属性被指定为：

以下关键字值之一：available，min-content，max-content，fit-content，auto。

<length>或<percentage>。这可以选择跟随以下关键字之一：border-box，content-box。

值

<length>可能的长度单位见<length>.

固有的最小宽度

固有首选宽度（max-content）和可用宽度（available）的较小值

正式语法

[ <length> | <percentage> ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto

示例

默认宽度

p.goldie {
  background: gold;
}

<p class="goldie">The Mozilla community produces a lot of great software.</p>

px 和 em

.px_length {
  width: 200px;
  background-color: red;
  color: white;
  border: 1px solid black;
}

.em_length {
  width: 20em;
  background-color: white;
  color: red;
  border: 1px solid black;
}

<div class="px_length">Width measured in px</div>
<div class="em_length">Width measured in em</div>

百分比

.percent {
  width: 20%;
  background-color: silver;
  border: 1px solid red;
}

<div class="percent">Width in percentage</div>

max-content

p.maxgreen {
  background: lightgreen;
  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
}

<p class="maxgreen">The Mozilla community produces a lot of great software.</p>

min-content

p.minblue {
  background: lightblue;
  width: -moz-min-content;    /* Firefox */
  width: -webkit-min-content; /* Chrome */
}

<p class="minblue">The Mozilla community produces a lot of great software.</p>

规范

Specification	Status	Comment
CSS Basic Box ModelThe definition of 'width' in that specification.	Working Draft	Added the max-content, min-content, available, fit-content, border-box, content-box keywords.
CSS TransitionsThe definition of 'width' in that specification.	Working Draft	Lists width as animatable.
CSS Level 2 (Revision 1)The definition of 'width' in that specification.	Recommendation	Precises on which element it applies to.
CSS Level 1The definition of 'width' in that specification.	Recommendation	Initial definition
CSS Intrinsic & Extrinsic Sizing Module Level 3The definition of 'width' in that specification.	Working Draft	Adds new sizing keywords for width and height.

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	(Yes)	(Yes)	1.0 (1.7 or earlier)	4	3.5	1.0 (85)
Animatability	?	?	16.0 (16.0)	?	?	?
max-content	22.0 -webkit 46.0 1	No support	3.0 (1.9)-moz	?	15 -webkit	2.0 (421) (intrinsic value) 6.1 -webkit
min-content	22.0 4 -webkit 46.0 1	No support	3.0 (1.9) -moz	?	15 -webkit	2.0 (421) (min-intrinsic value) 6.1 -webkit
available	No support	No support	3.0 (1.9) -moz	?	?	?1
fill-available	22.0 -webkit	No support	No support	?	?	6.1 -webkit
fit-content	22.0 4 -webkit 46.0 1	No support	3.0 (1.9) -moz	?	15 -webkit	6.1 -webkit2
border-box and content-box	No support	No support	No support	No support	No support	No support
fill	46.0	No support

Feature	Android	Android Webview	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile	Chrome for Android
Basic support	?	(Yes)	(Yes)	?	?	?	?	(Yes)
Animatability	?	?	?	16.0 (16.0)	?	?	?	?
max-content	No support	46.0 1	No support	?	?	?	?	46.0 1
min-content	No support	46.0 1	No support	?	?	?	?	46.0 1
available	?	?	No support	?	?	?	?	?
fill-available	No support	46.0 1	No support	?	?	?	?	46.0 1
fit-content	No support	46.0 1	No support	?	?	?	?	46.0 1
border-box and content-box	?	?	No support	?	?	?	?	?
fill	No support	46.0	No support	?				46.0