width

概述

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

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

示例

table { width: 100%; }

img   { width: 200px; }

form  { width: auto; }

p     { width: 40em; }

查看示例


p { background: gold }

The Mozilla community produces a lot of great software.


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

The Mozilla community produces a lot of great software.


p { background: lightblue;  max-width: -moz-min-content; }

The Mozilla community produces a lot of great software.

规范

规范 状态 注释
CSS Basic Box Model Working Draft 增加 max-content, min-content, available, fit-content, border-box, content-box 关键字.
CSS Transitions Working Draft width 列为可动画的.
CSS Level 2 (Revision 1) Recommendation 明确应用到哪个元素.
CSS Level 1 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 -webkit 3.0 (1.9)-moz ? ? 2.0 (421) (intrinsic value)
min-content 22 -webkit 3.0 (1.9) -moz ? ? ?
available 22 -webkit 3.0 (1.9) -moz ? ? ?
fit-content 22 -webkit 3.0 (1.9) -moz ? ? ?
border-box and content-box Not supported Not supported Not supported Not supported Not supported
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

参见

Document Tags and Contributors

Contributors to this page: evantre
最后编辑者: evantre,