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

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

width: auto (默认值)

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

width: 100%

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

总结:

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