CSS - width 属性

width 属性设置元素内容区域的宽度。如果 box-sizing 设置为 border-box，则 width 属性设置边框区域的宽度。

width 属性指定的值必须在 min-width 和 max-width 属性定义的值范围内。

请参考图片以了解元素宽度的含义。

可能的值

<length>：特定的长度值，例如像素 (px)、厘米 (cm)、英寸 (in) 等。
<percentage>：包含元素宽度的百分比。
auto：浏览器将根据内容自动计算宽度。这是默认值。
max-content：定义固有的首选宽度。
min-content：定义固有的最小宽度。
fit-content：将内容适应可用空间，但绝不超过 max-content。
fit-content：使用 fit-content 公式，即 min(max-content, max(min-content, <length-percentage>))。

应用于

所有 HTML 元素，除了非替换内联元素、表格行和行组。

DOM 语法

object.style.width = "100px";

CSS 宽度 - 长度单位

以下是如何使用长度单位为 div 元素添加宽度的示例

<html>
<head>
<style>
   div {
      border: 1px solid black;
      margin-bottom: 5px;
   }

   div.a {
      width: 100px;
      background-color: rgb(230, 230, 203);
   }
   div.b {
      width: 5em;
      background-color: rgb(230, 230, 203);
   }
</style>
</head>
<body>
   <div class="a">This div element has a width of 100px.</div>
   <div class="b">This div element has a width of 5em.</div>
</body>
</html>

CSS 宽度 - 百分比值

以下是如何使用百分比值为 div 元素添加宽度的示例

<html>
<head>
<style>
   div {
      border: 1px solid black;
      margin-bottom: 5px;
   }
   div.a {
      width: 120%;
      background-color: yellow;
   }
   div.b {
      width: 20%;
      background-color: rgb(236, 190, 190);
   }

</style>
</head>
<body>
   <div class="a">This div element has a width of 120%.</div>
   <div class="b">This div element has a width of 20%.</div>
</body>
</html>

CSS 宽度 - auto

以下是如何将 div 元素的宽度设置为 auto 的示例

<html>
<head>
<style>
   div {
      border: 1px solid black;
      margin-bottom: 5px;
   }
   div.auto {
      width: auto;
      background-color: yellow;
   }
</style>
</head>
<body>
   <div class="auto">This div element has a width set as auto.</div>
</body>
</html>

CSS 宽度 - 使用 max-content 和 min-content

以下是如何将宽度设置为 max-content 和 min-content 的示例

<html>
<head>
<style>
   div {
      border: 1px solid black;
      margin-bottom: 5px;
   }
   div.c {
      width: max-content;
      background-color: bisque;
   }
   div.d {
      width: min-content;
      background-color: darkseagreen;
   }
</style>
</head>
<body>
   <div class="c">This div element has a width as max-content.</div>
   <div class="d">This div element has a width of min-content.</div>
</body>
</html>

CSS 宽度 - 图片

以下是如何为图片添加宽度的示例

<html>
<head>
<style>
   div {
      border: 1px solid black;
      margin-bottom: 5px;
   }

   .demoImg {
      margin-top: 15px;
      width: 300px;
      margin-right: 0.5in;
   }
</style>
</head>
<body>
   <img class="demoImg" src="images/scancode.png" alt="image-width">
</body>
</html>

CSS 宽度 - 使用 fit-content

以下是如何为列表的宽度设置 fit-content 值的示例

<html>
<head>
<style>
   ul {
      background-color: beige;
      width: fit-content;
      padding: 1.5em;
      border: 2px solid black;
   }
   li {
      display: inline-flex;
      background-color: orange;
      border: 2px solid black;
      padding: 0.5em;
   }
</style>
<body>
   <ul>
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
      <li>Item4</li>
   </ul>
</body>
</html>

CSS 宽度 - 相关属性

以下是 width 的相关 CSS 属性列表

属性	值
max-width	设置元素宽度的上限。
min-width	设置元素宽度的下限。
min-content	设置内容的固有最小宽度。
max-content	设置内容的固有最大宽度。
fit-content	根据可用大小调整内容大小。
fit-content()	根据公式 min(最大尺寸, max(最小尺寸, 参数)) 限制给定尺寸。

打印页面