CSS Overflow学习笔记

概述

overflow属性指定当元素内容溢出其框时发生的事情。

默认值为visible，即在不剪切内容的情况下，显示所有内容。

除此之外还有以下值：

• hidden：将内容裁剪到元素框的边缘内。
• scroll：在需要时显示滚动条，并允许用户在内容超过元素大小时滚动。
• auto：如果内容未溢出，则和visible一样，否则行为与scroll相同。

实例

1. overflow: hidden

cssCopy Code
div {
  width: 200px;
  height: 100px;
  border: 1px solid #000;
  overflow: hidden;
}

这段代码会将宽度为200px、高度为100px的div元素内的内容裁剪至该元素的边缘内，并在内容溢出时隐藏超出的部分。

2. overflow: scroll

cssCopy Code
div {
  width: 200px;
  height: 100px;
  border: 1px solid #000;
  overflow: scroll;
}

这段代码会将宽度为200px、高度为100px的div元素内的内容显示在元素中，并在内容溢出时显示滚动条，以便用户可以滚动浏览全部内容。

3. overflow: auto

cssCopy Code
div {
  width: 200px;
  height: 100px;
  border: 1px solid #000;
  overflow: auto;
}

这段代码会将宽度为200px、高度为100px的div元素内的内容显示在元素中。如果内容未溢出，则行为与visible相同，否则会显示滚动条以便用户滚动浏览全部内容。

以上三个实例展示了overflow属性在CSS中不同取值时的不同表现方式。