width:100%与width:auto区别

width: 100% 和 width: auto 是 CSS 中用于设置元素宽度的两种不同方式，它们有一些区别和使用场景。

width: 100%:

• 当应用 width: 100% 样式时，元素的宽度将被设置为其父容器的宽度的百分比。这意味着元素将填充其父容器的可用宽度。如果父容器没有显式设置宽度，则元素的宽度将相对于其包含块的宽度进行计算。
• width: 100% 可以用于创建自适应宽度的元素，使其根据父容器的宽度进行调整。这在构建响应式布局时非常有用。
• 例如，如果一个元素的父容器宽度为 500px，设置 width: 100% 将使该元素的宽度为 500px。

width: auto:

• 当应用 width: auto 样式时，元素的宽度将自动根据其内容进行计算。它会根据元素内部内容的大小来确定宽度，以适应内容的宽度。
• width: auto 可以用于创建自适应宽度的元素，使其根据内容的宽度进行调整。这在需要根据内容动态调整宽度的情况下非常有用。
• 例如，如果一个元素的内容宽度为 300px，设置 width: auto 将使该元素的宽度为 300px。

举例：

<style>
  .container {
    width: 500px;
    border: 1px solid black;
    padding: 10px;
  }

  .full-width {
    width: 100%;
    background-color: lightblue;
    padding: 10px;
  }

  .auto-width {
    width: auto;
    background-color: lightgreen;
    padding: 10px;
  }
</style>

<div class="container">
  <div class="full-width">
    <p>This is a full-width element.</p>
  </div>
  <div class="auto-width">
    <p>This is an auto-width element.</p>
  </div>
</div>

  在上面的示例中，我们创建了一个容器 .container，它具有固定的宽度为 500px，并设置了边框和内边距。容器中包含了两个子元素 .full-width 和 .auto-width。

• .full-width 元素应用了 width: 100% 样式，使其宽度等于父容器的宽度。因此，它将填充整个容器的可用宽度，并具有浅蓝色的背景色。
• .auto-width 元素应用了 width: auto 样式，使其宽度根据内容自动调整。它将根据其内部文本的宽度而定，并具有浅绿色的背景色。

  通过这个例子，我们可以看到以下效果和解释：

• .full-width 元素的宽度等于父容器的宽度，即 500px。它填充了整个容器的宽度，无论容器的宽度如何变化，该元素的宽度都会相应调整。
• .auto-width 元素的宽度根据其内部文本的宽度而定。它的宽度会自动调整以适应内容的宽度，不会超过父容器的宽度。即使容器的宽度发生变化，该元素的宽度也会根据内容进行调整。

  前者用于让元素填充整个容器的宽度，后者用于根据内容自动调整元素的宽度。