CSS参考手册
基本框模型 | Basic Box Model
自动 | auto
width
属性指定了元素内容区的宽度。默认情况下,该属性定义了内容区域的宽度。如果box-sizing
设置为border-box
,则确定边框区域的宽度。
/* <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>
可能的长度单位见<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">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 |
基本框模型 | Basic Box Model相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。