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(最小尺寸, 引數)) 限制給定尺寸。

列印頁面