宽度 | width

width属性指定了元素内容区的宽度.内容区在元素padding，border和margin里面。

/* <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>将宽度定义为绝对值.

<percentage>将宽度指定为包含块宽度的一个百分比.

border-box如出现, 之前的<length>或<percentage>将应用到元素的边框.

content-box如出现, 之前的<length>或<percentage>将应用到元素的内容框.

auto浏览器将会为指定的元素计算并选择一个宽度.

fill使用 fill-available 行内尺寸或者 fill-available 块级尺寸的其中一种来作为合适的书写模式。max-content固有的首选宽度.

min-content固有的最小宽度.

available包含块的宽度减去水平 margin, border 和 padding.

fit-content以下两种情况下的较大值:

• 固有的最小宽度

• 固有首选宽度（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