overflow属性详解

overflow属性详解

 

概述：溢出元素内容区的内容会如何处理

 

## 取值

 

overflow: visible;溢出显示，默认值

overflow: hidden;溢出隐藏

overflow: scroll;溢出显示滚动条，横向和纵向滚动条都显示

overflow: auto;自动，内容溢出时，显示滚动条

 

 overflow-x 只包括水平方向。

 

 overflow-y 只包括垂直方向

 

```html

 body{

            /* overflow:hidden ; */

            /* overflow-x 只包括水平方向。

                overflow-y 只包括垂直方向。 */

            overflow-x: hidden;

            overflow-x: visible;

            overflow-x: scroll;

            overflow-x: auto;

 

            overflow-y: hidden;

            overflow-y: visible;

            overflow-y: scroll;

            overflow-y: auto;

 

        }

 

< img src="./images/yk.png" alt="">

```

 

## 应用

 

- 产品描述的溢出隐藏