overflow: hidden; 和 overflow: auto; 是 CSS 中用于处理溢出内容的两种常见方式，它们之间有一些区别：
-
overflow: hidden;：
- 当内容超出容器尺寸时，超出部分将被隐藏，不会显示在容器之外。
- 不会显示滚动条，用户无法滚动查看隐藏的内容。
- 超出的内容将被裁剪，即使用户想要查看也无法通过滚动来实现。
-
overflow: auto;：
- 当内容超出容器尺寸时，会根据需要自动显示滚动条。
- 如果内容没有超出容器尺寸，不会显示滚动条。
- 允许用户通过滚动条来查看超出容器尺寸的内容，提供了更好的用户体验。
使用场景
- 使用
overflow: hidden;通常用于隐藏不需要显示的溢出内容，或者用于创建视觉效果，比如裁剪图片。 - 使用
overflow: auto;则通常用于容器中可能出现溢出内容的情况，以便用户能够滚动查看全部内容。
区别总结
overflow: hidden;裁剪并隐藏溢出内容，不显示滚动条。overflow: auto;自动显示滚动条以允许用户查看溢出内容，但仅在需要时显示。