探索CSS中的宽度设置：width: 100% 与 width: auto 的区别

width: 100% 和 width: auto 是CSS中设置元素宽度的两种常见方式。

• width: 100%: 这会将元素的宽度设置为其父元素的宽度，即元素会扩展以填充其父元素的宽度。
• width: auto: 这是默认值。它表示让浏览器自动计算元素的宽度。如果不设置任何宽度，元素通常会占据足够的空间来显示其内容。

示例代码:

HTML:

<div class="parent">
  <div class="child-full">100% 宽度</div>
  <div class="child-auto">自动 宽度</div>
</div>

CSS:

.parent {
  width: 300px; /* 父元素的宽度设置为300像素 */
  background-color: lightblue;
}
 
.child-full {
  width: 100%; /* 子元素的宽度设置为100%，即300像素 */
  background-color: salmon;
}
 
.child-auto {
  width: auto; /* 子元素宽度保持默认值，根据内容自动计算 */
  background-color: lightgreen;
}

在这个例子中，.child-full 类使得子元素的宽度完全填充其父元素的宽度，即300像素。而 .child-auto 类则让子元素的宽度根据其内容自动计算。如果子元素中没有内容，它们将不会占据任何宽度，除非设置了 min-width 属性。