元素的显示与隐藏

1年前更新

380

文章目录[隐藏]

隐藏模式：
显示模式：
visibility可见性：
- 元素隐藏：
- 元素可视：
溢出的显示与隐藏：
总结：

隐藏模式：

选择器{display: none;}

可以隐藏需要隐藏的元素，比如说我们论坛里面的菜单栏的下拉菜单，也能用这个隐藏。

<html>
<style>
    .box1 {
        display: none;
        text-align: center;
        width: 100px;
        height: 40px;
        background-color: rgb(68, 71, 223);
        border-radius: 10px;
    }
    
    .box2 {
        text-align: center;
        width: 100px;
        height: 40px;
        background-color: rgb(223, 68, 68);
        border-radius: 10px;
    }
</style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</div>
</body>
</html>

注：隐藏不等于删除！

显示模式：

选择器{display: block;}

默认都是显示出来的，但是我们后期学习了JavaScript之后就能随意的执行显示与隐藏了。

<html>
<style>
    .box1 {
        display: block;
        text-align: center;
        width: 100px;
        height: 40px;
        background-color: rgb(68, 71, 223);
        border-radius: 10px;
    }
    
    .box2 {
        text-align: center;
        width: 100px;
        height: 40px;
        background-color: rgb(223, 68, 68);
        border-radius: 10px;
    }
</style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</div>
</body>
</html>

visibility可见性：

只是调节可见性，保留原有占用位置。

元素隐藏：

选择器{ visibility: hidden;}

隐藏元素，占有原来的位置。

<html>
<style>
    .box1 {
        /* display: block; */
        visibility: hidden;
        text-align: center;
        width: 100px;
        height: 40px;
        background-color: rgb(68, 71, 223);
        border-radius: 10px;
    }
    
    .box2 {
        text-align: center;
        width: 100px;
        height: 40px;
        background-color: rgb(223, 68, 68);
        border-radius: 10px;
    }
</style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</div>
</body>
</html>

元素可视：

选择器{visibility: visible;}

<html>
<style>
    .box1 {
        /* display: block; */
        visibility: visible;
        text-align: center;
        width: 100px;
        height: 40px;
        background-color: rgb(68, 71, 223);
        border-radius: 10px;
    }
    
    .box2 {
        text-align: center;
        width: 100px;
        height: 40px;
        background-color: rgb(223, 68, 68);
        border-radius: 10px;
    }
</style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</div>
</body>
</html>

溢出的显示与隐藏：

利用overflow元素加上属性hidden可以隐藏溢出部分，加上visible可以显示溢出部分（默认）。

<html>
<style>
    .box1 {
        /* display: block; */
        overflow: hidden;
        text-align: center;
        width: 100px;
        height: 40px;
        line-height: 40px;
        background-color: rgb(68, 71, 223);
        border-radius: 10px;
    }
    
    .box2 {
        overflow: visible;
        text-align: center;
        width: 100px;
        height: 40px;
        line-height: 40px;
        background-color: rgb(223, 68, 68);
        border-radius: 10px;
    }
</style>
</head>
<body>
    <div class="box1">hidden;123456789</div>
    <div class="box2">visible;123456789</div>
</div>
</body>
</html>

如果我们需要吧溢出部分让他不溢出也能设置滚动条，吧属性值改为scroll即可实现，也可以改为auto，auto就是自动判断，超出则显示滚动条。