CSS盒子模型隐藏的几种方式

2022-11-08 139

版权

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

简介： CSS盒子模型隐藏的几种方式

前言

合理的隐藏盒子,会有意想不到的结果

一、盒子隐藏概述

盒子的隐藏会使做出来的界面更加精致,灵活,带给用户更好的使用体验
盒子的隐藏使用css与js会有更好的动画效果
盒子隐藏的几种方式
1.display:none;
将盒子隐藏起来,并且放弃之前占有的位置
2.visibility:hidden;
盒子隐藏起来,不放弃自己占有的位置
3.overflow:hidden;
一般用于针对盒子内的东西,如果超出盒子的大小
就对超出的部分进行隐藏,也可以对超出的部分进行,滚动浏览
这三种隐藏方式各有各的优点

二、display

前面介绍过这个属性，作用是进行块元素与行内块元素的转换。今天讲这个属性是将盒子进行隐藏

1.赋予display none属性

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        display盒子进行隐藏,none用于隐藏,block用于恢复盒子
     -->
    <style>
        .nav {
            width: 300px;
            height: 300px;
            background-color: aquamarine;
            display: none;
        }
        .qwe {
            width: 300px;
            height: 300px;
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div class="nav"></div>
    <div class="qwe"></div>
</body>
</html>

2.未加display:none;效果展示

2.加display:none;效果展示

可以看出原来的第一个盒子变为了透明,并放弃了原来的位置。

三、visibility

从属性名可以看出,这个属性管理的是可视化，而hidden意思是隐藏
隐蔽（就是将盒子以隐藏的形式进行展示出来）

1.visibility: hidden;

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        visibility将盒子隐藏后不放弃盒子原来的位置
        使用visible进行盒子恢复
     -->
    <style>
        .nav {
            visibility: hidden;
            width: 300px;
            height: 300px;
            background-color: blueviolet;
        }
        .qwe {
            width: 300px;
            height: 300px;
            background-color: chartreuse;
        }
    </style>
</head>
<body>
    <div class="nav"></div>
    <div class="qwe"></div>
</body>
</html>

2.未加visibility: hidden;效果展示

3.加visibility: hidden;效果展示

四、overflow

这个属性就是将超出盒子边界的文字或图片进行隐藏

1.代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        overflow对盒子内部的东西进行处理,有多种模式,其中auto兼容性很强
     -->
    <style>
        .nav {
            width: 300px;
            height: 300px;
            background-color: #fff;
            /* overflow: auto; */
            overflow: hidden;
            margin: 0 auto;
            border: 1px blue solid;
        }
    </style>
</head>
<body>
    <div class="nav">
        wefbkujsadbfjdkas<br></br>
        nfkldjfklsdjfl;asdf<br>j
        ml;sdajfl;a<br>jfl;eja;
        lwefbkujsadbfjdkas<br>
        </br>nfkldjfklsdjfl;asdf<
        br>jml;sdajfl;a<br>jfl;eja;
        lfjlwe<br>wefbkujsadbfjdkas<br>
        </br>nfkldjfklsdjfl;asdf<br>jml
        ;sdajfl;a<br>jfl;eja;lfjlwe<br>
        fjlwe<br>;jflejlfjlejfl
    </div>
</body>
</html>

2.不加这个属性效果展示

3.加hidden效果展示

4.加auto效果展示

会对盒子与超出部分进行兼容性合并

总结

盒子的隐藏尤为重要,可以将填好的表单隐藏起来,在点击特定的按钮时继续填写,可以做一些动态图片效果展示,可以极大地提高用户体验。