overflow属性详解-阿里云开发者社区

overflow属性详解

2022-11-30 456

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： overflow是对溢出内容的处理

原链接

overflow是对溢出内容的处理，有四个属性值visible，hidden，scroll，auto，且可以分别设置overflow-x，overflow-y，需要注意的是：当单独设置了overflow-x或者overflow-y为非visible时，另一个属性值默认为auto，如【例5】。

下面先来介绍它的四个属性值.

1.visible（默认值）：使溢出内容展示【例1】

2.hidden：隐藏溢出内容且不出现滚动条【例2】

3.scroll：隐藏溢出容器的内容，溢出的内容可以通过滚动呈现【例3】

4.auto：与scroll没啥区别（就是scroll和auto还是有细微差别的。auto只有在内容溢出后才显示滚动条，内容不溢出不显示，有点而“智能”，scroll即使内容不溢出也显示滚动条）【例4】

【例1】visible

效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .wrapper {
            position: absolute;
            left: 100px;
            top: 100px;
            width: 200px;
            height: 200px;
            border: 1px solid #333;
            border-radius: 10px;
            color: #424242;
            overflow: visible;
        }
        .content {
            width: 250px;
            height: 250px;
            padding: 20px;
            border: 1px solid #33f;
            border-radius: 10px;
            background-color: rgba(200, 255, 200, 0.5);
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="content">
            <p>
                我们在之前的一本著作中研究群体观念对各国发展的影响时已经指出，每一种文明都是少数几个基本观念的产物，这些观念很少能够得到革新。我们指出，这些观念在群体的心中是多么稳固，要想对这一过程产生影响是多么困难，以及这些观念一旦实现之后所拥有的力量。最后我们又说，历史的波动就是这些基本观念的改变所引发的结果。
            </p>
        </div>
    </div>
</body>
</html>