overflow属性的简单介绍

最新推荐文章于 2024-04-21 22:40:04 发布

Tea-pd

最新推荐文章于 2024-04-21 22:40:04 发布

阅读量2.1k

点赞数 3

文章标签： java servlet 前端 html css3

本文链接：https://blog.csdn.net/tea_tea_/article/details/125380346

版权

前言：本人是新生小白，如有错误之处欢迎指出

我们先写一个基础框架

<!DOCTYPE html>
<html>
<head>
    <title>overflow</title>
</head>
<body>
    
</body>
</html>

首先先介绍一下overflow是处理溢出内容的一个效果，他有四个属性值hidden，visible，scroll，auto，且可以分别设置overflow-x，overflow-y，需要注意的是：当单独设置了overflow-x或者overflow-y为非visible时，另一个属性值默认为auto。

1.hidden：隐藏溢出内容且不出现滚动条。

2.scroll：其overflow-x，overflow-y，分别处理x轴和y轴隐藏溢出容器的内容，溢出的内容可以通过侧边滚动条的效果来使用。

3.visible（默认值）：使溢出内容展示。

4.auto：作用和scroll很像。

<!DOCTYPE html>
<html lang="en">
 
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        .header {
            position: absolute;
            left: 100px;
            top: 100px;
            width: 200px;
            height: 200px;
            border: 1px solid #333;
            border-radius: 10px;
            color: #gray;
            overflow: visible;
        }
 
        .max {
            width: 250px;
            height: 250px;
            padding: 20px;
            border: 1px solid red;
            border-radius: 13px;
            background-color: yellow;
 
        }
    </style>
</head>
 
<body>
    <div class="header">
        <div class="max">
            <p>
               随机生成随机生成随机生成随机生成随机生成随机生成随机生成随机生成随机生成随机生成随机生成随机生成随机生成随机生成随机生成随机生成随机生成随机生成随机生成随机生成随机生成随机生成随机生成随机生成随机生成随机生成随机生成随机生成随机生成随机生成随机生成随机生成随机生成随机生成随机生成随机生成随机生成随机生成随机生成随机生成随机生成。
            </p>
        </div>
    </div>
</body>
 
</html>