首页 > 代码库 > css的isibility和overflow

css的isibility和overflow

2024-10-05 04:02:39   218人阅读

visibility　

　　-1.设置是否显示对象。与display：none不同，此属性为隐藏的对象保留其占据的物理空间

　　-2.如果希望对象为可视，其父对象也必须为可视的。

　　-3.属性值：

　　　　　　-visible：设置对象可视

　　　　　　-hidden：设置对象隐藏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .content{
            width: 100px;
            height: 100px;
            background-color: aqua;
            visibility: visible;
        }
        .container{
            width: 200px;
            height: 200px;
            background-color: bisque;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
            hello
        </div>
    </div>
</body>
</html>

 

overflow

　　-1.复合属性，设置对象处理溢出内容的方式。效果等同于overflow-x + overflow-y

　　-2.如果希望对象为可视，其父对象必须也为可视

　　-3.属性值：

　　　　　　visible：对溢出内容不处理，内容可能会超出容器(默认)

　　　　　　hidden：隐藏溢出容器的内容且不会出现滚动条

　　　　　　scroll：隐藏溢出容器的内容，溢出的内容将会以滚动条的方式呈现

　　　　　　auto：当内容没有溢出容器时不出现滚动条，当内容出现溢出时，出现滚动条，按需出现滚动条。

　　　　　　　　此为body对象和textarea的默认值。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .content{
            width: 200px;
            height: 100px;
            background-color: pink;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="content">
        大家好
    </div>
</body>
</html>

 

css的isibility和overflow


联系
我们