Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

概述

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

min-widthmax-width 属性覆盖 width.

初始值auto
适用元素all elements but non-replaced inline elements, table rows, and row groups
是否是继承属性
Percentagesrefer to the width of the containing block
适用媒体visual
计算值a percentage or auto or the absolute length
Animation typea 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 中移除。

另请参见

文档标签和贡献者

标签: 
 最后编辑者: Ende93,