CSS：overflow作用

介绍

在Web开发中，overflow 是CSS（层叠样式表）的一个属性，用于控制当元素的内容太大而无法适应其块级格式化上下文时如何处理。overflow 属性主要应用于块级元素（例如div），但它也可以应用于替换元素（例如img）和某些表元素。

常用值

1. visible：这是默认值，表示内容不会被剪裁，可以呈现在元素框之外。
2. hidden：超出元素框的内容将被隐藏，不显示。
3. scroll：无论内容是否超出元素框，都会显示滚动条，用户可以通过滚动条来查看隐藏的内容。
4. auto：当内容超出元素框时，会显示滚动条，否则不显示滚动条。
5. inherit：继承父元素的overflow属性值。

举例

1. 使用 overflow: hidden 隐藏溢出内容

.box {
  width: 200px;
  height: 200px;
  overflow: hidden;
  background-color: lightblue;
}

在这个例子中，任何.box类的元素如果内容超出了其200px x 200px的尺寸，超出的部分将会被隐藏。

2. 使用 overflow: scroll 总是显示滚动条

.box {
  width: 200px;
  height: 200px;
  overflow: scroll;
  background-color: lightgreen;
}

在这个例子中，无论.box类的元素内容是否超出其尺寸，都会显示滚动条，允许用户滚动查看内容。

3. 使用 overflow: auto 根据需要显示滚动条

.box {
  width: 200px;
  height: 200px;
  overflow: auto;
  background-color: lightcoral;
}

在这个例子中，只有当.box类的元素内容超出其尺寸时，才会显示滚动条。

总结

overflow 属性对于控制容器内内容的表现非常重要，特别是在处理固定尺寸的容器或者需要避免内容破坏页面布局时。此外，overflow 属性还可以用来创建滑动或轮播效果的用户界面元素。