width

CSS 中的 width 属性指定元素内容区域的宽度。此“内容”区域位于元素的 填充、边框 和 边距 内部 (盒子模型)。

.wrap { 
  width: 80%;
}

在上面的示例中，类名为 .wrap 的元素的宽度将是其父元素宽度的 80%。除了我们稍后将介绍的一些关键词外，可接受的值是任何 长度值。

宽度可以被密切相关的属性 min-width 和 max-width 覆盖。

.wrapper-1 {
  width: 100%;
  max-width: 320px; /* Will be AT MOST 320px wide */
}

.wrapper-2 {
  width: 100%;
  min-width: 20em; /* Will be AT LEAST 20em wide */
}

深入探讨

当使用百分比 (%) 设置宽度时，作者必须意识到百分比是基于元素的父元素，换句话说，是基于包含块的宽度。如果您的父元素设置为 480px（如我们的演示所示），则百分比基于该值。因此，在我们的例子中，480px 的 50% 让我们得到 240px 作为计算出的像素值。

请注意，width 应用于除 非替换 或 内联元素、表格行和 行组（即 thead、tfoot 和 tbody）之外的所有元素。在 HTML 如何定义非替换元素 和 CSS 如何定义它 之间似乎存在细微的差异，但我们指的是 CSS 的定义方式：内容未由标签本身定义的元素，例如带有 src 属性的 <img>。

对于其包含块基于块容器元素的绝对定位元素，百分比是相对于该元素的填充框宽度计算的。

关键词值

使用一些特殊的关键词值，可以根据元素的内容定义宽度（和/或高度）。

min-content

min-content 值是如果利用了框中所有**软换行机会**，则可以容纳其内容的最小尺寸。

这种值最好的示例是正确编写的 figure 元素。

一旦我们对这个标记应用了一些基本样式，我们就会得到

如果我们希望该 figure 元素基本上与该图像的大小相同，以便文本在图像边缘处换行。我们可以将其左浮动或右浮动，因为浮动将表现出相同的收缩以适应行为，但如果我们想要将其居中呢？min-content 允许我们将其居中。

因为我们已将 min-content 分配给 figure 元素，所以在利用所有软换行机会（如单词之间的空格）的情况下，它采用它可以具有的最小宽度，以便内容仍然适合该框。

max-content

max-content 属性指的是如果未利用元素中的任何软换行机会，则框可以容纳其内容的最窄尺寸。

看看如果将其应用于我们简单的猫咪/figure 演示会发生什么。

因为标题比图像宽得多（它不利用任何软换行机会，例如单词之间的空格），这意味着它必须在一行上显示标题，因此 figure 与该行一样宽。

fill-available

？？？。人生一大谜团。

fit-content

fit-content 的值在行为上大致等同于 margin-left: auto 和 margin-right: auto，除了它适用于未知宽度。

例如，假设我们需要将一个内联导航横跨页面居中。最佳选择是将 text-align: center 应用于 ul，并将 display: inline-block 应用于 li。这将为您提供如下内容

但是，蓝色背景（来自 ul 元素）会扩展到整个文档，因为 ul 是一个块级元素，这意味着它的宽度仅受其包含元素的限制。如果我们希望蓝色背景围绕列表项折叠怎么办？fit-content 可以解决！

使用 fit-content 和 margin: 1em auto，这就像一个魅力一样，只有导航有彩色背景，而不是整个文档宽度。

如果您喜欢这种东西，您会很高兴知道定义 fit-content 长度大小的公式是

fit-content = min(max-content, max(min-content, fill-available))

这是一个很少使用的值，所以如果您想出了一个很棒的用例，请告诉我们！

浏览器支持

IE	Edge	Firefox	Chrome	Safari	Opera
全部	全部	全部	全部	全部	全部

Android Chrome	Android Firefox	Android 浏览器	iOS Safari	Opera Mobile
全部	全部	全部	全部	全部

更多信息

相关属性