Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

此页面上有脚本错误。虽然它是写给网站编辑,您可以在下面查看部分内容。

这篇文章需要技术复核。如何帮忙。

概述

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
是否适用于 CSS 动画yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
正规顺序the length or percentage before the keyword, if both are present

语法

正式语法: [ <length> | <percentage> ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto
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>
可能的长度单位见 {{ cssxref }} .
<percentage>
指定为包含块宽度的 <percentage> .
border-box
如出现, 之前的 {{ cssxref }} 或 <percentage> 应用到元素的边框盒子.
content-box
如出现, 之前的 {{ cssxref }} 或 <percentage> 应用到元素的内容盒子.
auto
浏览器将会为指定的元素计算并选择一个宽度.
max-content
固有的首选宽度.
min-content
固有的最小宽度.
available
包含块的宽度减去水平 margin, border 和 padding.
fit-content
以下两种情况下的较大值:
  • 固有的最小宽度
  • 固有首选宽度(max-content)和可用宽度(available)的较小值
注意: WebKit 在intrinsic下实现了这个值的早期版本 , 但在 June 2012, 同样实现了 fit-content .

正式语法

[ <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 中移除。

另请参见

文档标签和贡献者

标签: 
 最后编辑者: cjl,