2024年5月29日发(作者：)

css中overflow用法

CSS中的overflow属性是用来控制元素内容溢出时的表现方式。

当元素内容超出其指定的尺寸时，可以通过设置overflow属性来定

义内容溢出时的处理方式，包括显示滚动条、隐藏溢出内容或自动

调整尺寸等。

在CSS中，overflow属性有以下几种取值：

- visible：默认值，表示内容溢出时不进行任何处理，溢出内容会

覆盖到其他元素上。

- hidden：表示内容溢出时进行隐藏处理，溢出内容将被裁剪掉，

不可见。

- scroll：表示内容溢出时显示滚动条，用户可以通过滚动条来查看

溢出内容。

- auto：表示内容溢出时自动调整尺寸或显示滚动条，具体表现方

式取决于浏览器。

使用overflow属性可以为元素设置溢出时的处理方式，从而有效地

控制内容的显示和隐藏。例如，当一个容器元素的尺寸固定且内容

较多时，可以通过设置overflow属性为scroll来显示滚动条，以便

用户可以滚动查看全部内容。另外，当一个图片元素的尺寸小于图

片本身的尺寸时，可以通过设置overflow属性为hidden来隐藏溢

出的部分，以便图片在指定尺寸内完整显示。

除了上述常用的取值外，overflow属性还有一个取值为auto。当

设置为auto时，浏览器会根据元素内容是否溢出自动调整尺寸或

显示滚动条。具体表现方式取决于浏览器，不同浏览器可能会有不

同的处理方式。

需要注意的是，overflow属性只对具有尺寸限制的容器元素起作用，

对于没有设置尺寸限制的元素，即使内容溢出也不会触发overflow

属性的效果。因此，如果想要使用overflow属性来控制元素内容的

溢出，必须为元素设置合适的尺寸限制。

overflow属性也可以分别控制元素的水平和垂直方向上的内容溢出

处理。通过设置overflow-x属性和overflow-y属性，可以分别控

制元素水平方向和垂直方向上的内容溢出。例如，可以将

overflow-x设置为scroll，overflow-y设置为hidden，从而实现

水平方向上显示滚动条，垂直方向上隐藏溢出内容的效果。

总结一下，CSS中的overflow属性是用来控制元素内容溢出时的

表现方式。通过设置overflow属性，可以定义内容溢出时的处理方

式，包括显示滚动条、隐藏溢出内容或自动调整尺寸等。常用的取

值有visible、hidden、scroll和auto，分别表示不进行处理、隐

藏溢出内容、显示滚动条和自动调整尺寸或显示滚动条。需要注意

的是，overflow属性只对具有尺寸限制的容器元素起作用，对于没

有设置尺寸限制的元素，即使内容溢出也不会触发overflow属性的

效果。另外，可以通过设置overflow-x和overflow-y属性分别控

制元素水平和垂直方向上的内容溢出处理。