overflow: hidden;有几种用法？

"overflow: hidden;" 有以下几种用法：

1. 隐藏超出容器边界的内容。当容器中的内容超出容器的大小时，超出的部分将被隐藏。这个用法是最常见的。

2. 清除浮动。当容器中有浮动元素时，容器的高度将不被撑起来，这时可以使用 "overflow: hidden;" 来清除浮动。

3. 防止文字环绕。当一个容器中的文字环绕在另一个元素周围时，可以使用 "overflow: hidden;" 来防止文字环绕。

4. 防止滚动条出现。当容器中的内容不需要滚动时，可以使用 "overflow: hidden;" 来防止滚动条出现。

5. 隐藏表格单元格中的内容。当单元格中的内容超出单元格的大小时，可以使用 "overflow: hidden;" 来隐藏单元格中的内容。

相关问题

overflow： hidden 怎么显示图片

`overflow: hidden;` 是CSS的一个属性设置，它通常用于防止内容溢出元素的可见区域。当应用于一个包含图片的容器时，如果图片尺寸大于该容器，隐藏（hidden）效果会让超出部分不可见，图片会被裁剪或者缩放以适应容器的大小。

如果你想让图片仍然完整显示并保持原图比例，但又希望隐藏溢出的部分，可以采用以下几种方法：

1. **设置最大宽度**：使用 `max-width: 100%;` 和 `height: auto;`，这会使图片按其原始宽度填充可用空间，高度自动调整以保持纵横比。

.container {
  max-width: 100%;
  height: auto;
  overflow: hidden;
}

2. **使用 CSS 盒模型**：对于块级元素，可以使用 `box-sizing: border-box;` 来包含内边距和边框在元素的总宽度计算中，从而不会导致溢出。

.container {
  box-sizing: border-box;
  overflow: hidden;
}

3. **使用 `position: relative` 和 `clip-path`**：如果你想要更复杂的剪切效果，可以使用 `position: relative;` 配合 `clip-path` 属性来定制图像的显示区域。

.container {
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

解决页面使用overflow: scroll，overflow-y:hidden在iOS上滑动卡顿的问题

在 iOS 上使用 `overflow: scroll` 或 `overflow-y:hidden` 时，可能会导致页面滑动卡顿的问题。这是因为 iOS 上的滚动机制与其他平台不同，iOS 会将滚动事件转换为 touch 事件，而 touch 事件的处理会比 mouse 事件复杂，因此可能会导致页面卡顿。

为了解决这个问题，可以尝试以下几种方法：

1. 使用 `-webkit-overflow-scrolling: touch` 属性来启用 iOS 上的滚动优化。这个属性会启用硬件加速和平滑滚动，可以提高页面滑动的性能。

.container {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

2. 减少页面中的滚动元素数量。滚动元素越多，处理滚动事件的复杂度就越高，可能会导致页面卡顿。

3. 优化页面中的滚动元素。例如，使用 `transform` 属性来实现滚动效果，可以提高性能。

4. 使用第三方库来实现滚动效果，例如 iScroll、BetterScroll 等。这些库会使用特定的滚动机制来优化页面滑动的性能。

希望以上方法能够帮助你解决页面滑动卡顿的问题。