width

概述

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

min-width 和 max-width 属性覆盖 width.

初始值	`auto`
适用元素	all elements but non-replaced inline elements, table rows, and row groups
是否是继承属性	否
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: 300px        /* <length> values */
width: 25em

width: 75%          /* <percentage> values */

width: border-box   /* Keyword values */
width: content-box
width: max-content
width: min-content
width: available
width: fit-content
width: auto

width: inherit

值

<length>

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

<percentage>

指定为包含块宽度的 <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">以 px 度量的宽度</div>
<div class="em_length">以 em 度量的宽度</div>

百分比

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

<div class="percent">按照百分比度量的宽度</div>

max-content

p.maxgreen {
  background: lightgreen;
  width: intrinsic;           /* Safari/WebKit 使用了非标准的名称 */
  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>

规范

规范	状态	注释
CSS Basic Box Model width	Working Draft	增加 `max-content`, `min-content`, `available`, `fit-content`, `border-box`, `content-box` 关键字.
CSS Transitions width	Working Draft	`width` 列为可动画的.
CSS Level 2 (Revision 1) width	Recommendation	明确应用到哪个元素.
CSS Level 1 width	Recommendation	最初规范.

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	(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]	3.0 (1.9)-moz	?	15 -webkit	2.0 (421) (`intrinsic` value) 6.1 -webkit
`min-content`	22.0 [4] -webkit 46.0 [1]	3.0 (1.9) -moz	?	15 -webkit	2.0 (421) (`min-intrinsic` value) 6.1 -webkit
`available`	未实现	3.0 (1.9) -moz	?	?	?^[1]
`fill-available`	22.0 -webkit	未实现	?	15 -webkit	6.1 -webkit
`fit-content`	22.0 [4] -webkit 46.0 [1]	3.0 (1.9) -moz	?	15 -webkit	6.1 -webkit^[2]
`border-box` and `content-box`	未实现	未实现	未实现	未实现	未实现

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

[1] Webkit于2013年12月增加了该值的一个变体 fill-available 。

[2] 更之前版本的 Webkit 使用了 intrinsic 作为该值的一个早期版本，但亦于版本 6.1 中增加了 fit-content 。

[3] Unprefixed.

[4] 老版本的Webkit支持 intrinsic 和 min-intrinsic 关键字，但已于 Chrome 48 中移除。

另请参见

box model, height, box-sizing, min-width, max-width