请说说width: auto和width: 100%有什么区别？

在前端开发中，width: auto 和 width: 100% 看似相似，但实际行为有关键区别：

width: auto (默认值)

根据内容计算宽度: 元素的宽度会根据其内容、内边距（padding）和边框（border）自动计算。这意味着元素会尽可能地收缩以适应其内容，并且不会超出其包含块的宽度。
考虑水平内边距和边框: 计算宽度时会包含元素的水平内边距和边框。
不会溢出容器: 元素不会超出其包含块的宽度，即使内容很长，也会换行或被隐藏（取决于 overflow 属性的设置）。

width: 100%

占据可用宽度: 元素的宽度会占据其包含块的全部可用宽度。
不考虑水平内边距和边框: 设置 width: 100% 后，元素的总宽度（包含内容、内边距和边框）会超出包含块的宽度。如果添加了内边距或边框，元素会溢出容器。
可能溢出容器: 由于 width: 100% 指的是包含块的可用宽度，再加上内边距和边框，元素的总宽度很容易超出包含块，导致水平滚动条出现或者内容被裁剪。

总结:

示例场景:

width: auto 适用场景: 大多数情况下，特别是文本、图片等内容，使用 width: auto 可以让元素根据内容自适应宽度，避免溢出。例如，段落 <p> 元素默认就是 width: auto。
width: 100% 适用场景: 希望元素占据容器的整个宽度，例如横幅、页脚等。但需要注意处理内边距和边框，可以使用 box-sizing: border-box 将内边距和边框包含在宽度计算中，避免溢出。

box-sizing: border-box 的作用:

当 box-sizing: border-box 生效时，width: 100% 的行为会发生改变：元素的总宽度（包括内边距和边框）会限制在包含块的可用宽度之内。这意味着即使设置了内边距和边框，元素也不会溢出容器。这通常是推荐的做法，可以简化布局和避免溢出问题。