此頁面由社群從英文翻譯而來。了解更多並加入 MDN Web Docs 社群。
width
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
* Some parts of this feature may have varying levels of support.
Thewidth CSS property specifies the width of an element. By default, the property defines the width of thecontent area. Ifbox-sizing is set toborder-box, however, it instead determines the width of theborder area.
/* <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;Examples
<div> <div> <div> <length> values <p>width: 150px</p> <p>width: 20em</p> <p title="this feature is experimental and might not work in your browser"> width: 20em content-box </p> <p title="this feature is experimental and might not work in your browser"> width: 20em border-box </p> </div> <div> <percentage> values <p>width: 75%</p> <p title="this feature is experimental and might not work in your browser"> width: 75% content-box </p> <p title="this feature is experimental and might not work in your browser"> width: 75% border-box </p> </div> <div> Keyword values <p>width: auto</p> <p title="this feature is experimental and might not work in your browser"> width: max-content </p> <p title="this feature is experimental and might not work in your browser"> width: min-content </p> <p title="this feature is experimental and might not work in your browser"> width: available </p> <p title="this feature is experimental and might not work in your browser"> width: fit-content </p> </div> </div></div>html,body { height: 100%; box-sizing: border-box;}.grid { width: 100%; height: 100%; display: flex; background: #eee; font: 1em monospace;}.col { display: flex; flex: 1 auto; flex-direction: column;}.cell { margin: 0.5em; padding: 0.5em; background-color: #fff; overflow: hidden; text-align: left; font-style: italic;}p { font-size: 1rem; font-style: normal; background: #e4f0f5; padding: 0.5em; margin: 0.5em;}.warning { background: #e4e4e4;}.warning:before { content: "⚠️ ";}/* values */.w1 { width: 150px;}.w2 { width: 20em;}.w3 { width: 20em content-box;}.w4 { width: 20em border-box;}/* value */.w5 { width: 75%;}.w6 { width: 75% content-box;}.w7 { width: 75% border-box;}/* Keyword values (mostly experimental) */.w8 { width: max-content;}.w9 { width: min-content;}.w10 { width: available;}.w11 { width: fit-content;}Syntax
Thewidth property is specified as either:
- one of the following keyword values:
available,min-content,max-content,fit-content,auto. - a
<length>or a<percentage>. This may optionally be followed by one of the following keywords:border-box,content-box.
Values
<length>Defines the width as an absolute value.
<percentage>Defines the width as a percentage of the containing block's width. If the width of the containing block depends on the width of the element, the resulting layout is undefined.
border-box實驗性質If present, the preceding
<length>or<percentage>is applied to the element's border box.content-box實驗性質If present, the preceding
<length>or<percentage>is applied to the element's content box.autoThe browser will calculate and select a width for the specified element.
fill實驗性質Use the
fill-availableinline size orfill-availableblock size, as appropriate to the writing mode.max-content實驗性質The intrinsic preferred width.
min-content實驗性質The intrinsic minimum width.
available實驗性質The containing block width minus horizontal margin, border and padding.
fit-content實驗性質The larger of: the intrinsic minimum width
- the smaller of the intrinsic preferred width and the available width
Formal syntax
width =
auto|
<length-percentage [0,∞]>|
min-content|
max-content|
fit-content(<length-percentage [0,∞]>)|
<calc-size()>|
<anchor-size()>|
stretch|
fit-content|
contain
<length-percentage> =
<length>|
<percentage>
<calc-size()> =
calc-size(<calc-size-basis> ,<calc-sum>)
<anchor-size()> =
anchor-size([<anchor-name>||<anchor-size>]? ,<length-percentage>?)
<calc-size-basis> =
<size-keyword>|
<calc-size()>|
any|
<calc-sum>
<calc-sum> =
<calc-product>[[ '+'| '-']<calc-product>]*
<anchor-name> =
<dashed-ident>
<anchor-size> =
width|
height|
block|
inline|
self-block|
self-inline
<calc-product> =
<calc-value>[[ '*'| /]<calc-value>]*
<calc-value> =
<number>|
<dimension>|
<percentage>|
<calc-keyword>|
(<calc-sum>)
<calc-keyword> =
e|
pi|
infinity|
-infinity|
NaN
範例
預設寬度
p.goldie { background: gold;}<p>The Mozilla community produces a lot of great software.</p>像素和相對大小
.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>Width measured in px</div><div>Width measured in em</div>百分比
.percent { width: 20%; background-color: silver; border: 1px solid red;}<div>Width in percentage</div>內容最大值
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>The Mozilla community produces a lot of great software.</p>內容最小值
p.minblue { background: lightblue; width: -moz-min-content; /* Firefox */ width: -webkit-min-content; /* Chrome */}<p>The Mozilla community produces a lot of great software.</p>規範
| Specification |
|---|
| CSS Box Sizing Module Level 4 # sizing-values |