width 属性用于设置元素的宽度。width 默认设置内容区域的宽度，但如果 {{cssxref("box-sizing")}} 属性被设置为 border-box，就转而设置边框区域的宽度。

{{InteractiveExample("CSS Demo: width")}}

```css interactive-example-choice width: 150px;


```css interactive-example-choice
width: 20em;

```css interactive-example-choice width: 75%;


```css interactive-example-choice
width: auto;

```html interactive-example

This is a box where you can change the width. 


```css interactive-example
#example-element {
  display: flex;
  flex-direction: column;
  background-color: #5b6dcd;
  height: 80%;
  justify-content: center;
  color: #ffffff;
}

{{ cssxref("min-width") }} 和 {{ cssxref("max-width") }} 属性的优先级高于 {{ cssxref("width") }}。

语法

/* <length> values */
width: 300px;
width: 25em;

/* <percentage> value */
width: 75%;

/* Keyword values */
width: max-content;
width: min-content;
width: fit-content(20em);
width: auto;

/* Global values */
width: inherit;
width: initial;
width: unset;

width 属性也指定为：

值

  • {{cssxref("<length>")}}
    • : 使用绝对值定义宽度。
  • {{cssxref("<percentage>")}}
    • : 使用外层元素的容纳区块宽度（the containing block's width）的百分比定义宽度。
  • auto
    • : 浏览器将会为指定的元素计算并选择一个宽度。
  • max-content {{ experimental_inline }}
    • : 元素内容固有的（intrinsic）合适宽度。
  • min-content {{ experimental_inline }}
    • : 元素内容固有的最小宽度。

  • fit-content {{ experimental_inline }}

    • : 取以下两种值中的较大值：
    • 固有的最小宽度
    • 固有首选宽度（max-content）和可用宽度（available）两者中的较小值

    可表示为：min(max-content, max(min-content, <length-percentage>))

形式语法

{{csssyntax}}

示例

默认宽度

p.goldie {
  background: gold;
}

<p class="goldie">The Mozilla community produces a lot of great software.</p>

{{EmbedLiveSample('默认宽度', '500px', '64px')}}

像素 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>

{{EmbedLiveSample('像素 px 和字高 em', '500px', '64px')}}

百分比

.percent {
  width: 20%;
  background-color: silver;
  border: 1px solid red;
}

<div class="percent">按照百分比度量的宽度</div>

{{EmbedLiveSample('百分比', '500px', '64px')}}

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>

{{EmbedLiveSample('max-content_使用示例', '500px', '64px')}}

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>

{{EmbedLiveSample('min-content_使用示例', '500px', '155px')}}

无障碍考虑

当页面放大以增加文本大小时，请确保 width 设置的元素不会被截断并且不会遮挡其他内容。