CSS Width - 易学教程，面试笔记经验！

CSS 属性

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

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

参考图像以了解元素的宽度。

CSS 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 width: 长度单位

以下是向 a 中添加宽度的示例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">此 div 元素的宽度为 100px.</div>
   <div class="b">此 div 元素的宽度为 5em.</div>
</body>
</html> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

CSS width: 百分比值

以下是向 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">此 div 元素的宽度为 120%.</div>
   <div class="b">此 div 元素的宽度为 20%.</div>
</body>
</html> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

CSS width: 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">该 div 元素的宽度设置为auto。</div>
</body>
</html> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

CSS width: 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">该 div 元素的宽度为 max-content。</div>
   <div class="d">该 div 元素的宽度为 min-content。.</div>
</body>
</html> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

CSS width: 图像

以下是向图像添加宽度的示例:

复制代码复制代码<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="/css/images/scancode.png" alt="image-width">
</body>
</html> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

CSS width: 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> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

CSS width: 相关属性

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

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