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

css的isibility和overflow

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