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

最新推荐文章于 2024-08-06 21:01:08 发布

rgrgrwfe

最新推荐文章于 2024-08-06 21:01:08 发布

阅读量3.1k

点赞数 2

分类专栏：前端 html 面试文章标签： css css3 html

原文链接：https://blog.youkuaiyun.com/apple_51931783/article/details/122699210

版权

面试同时被 3 个专栏收录

84 篇文章

订阅专栏

前端

7 篇文章

订阅专栏

html

7 篇文章

订阅专栏

文章目录

前言
一、盒子隐藏概述
二、display
三、visibility
四、overflow
总结

前言

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

一、盒子隐藏概述

盒子的隐藏会使做出来的界面更加精致,灵活,带给用户更好的使用体验
盒子的隐藏使用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效果展示

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

在这里插入图片描述

总结

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

总结

写到这里也结束了，在文章最后放上一个小小的福利，以下为小编自己在学习过程中整理出的一个关于前端开发的学习思路及方向。从事互联网开发，最主要的是要学好技术，而学习技术是一条慢长而艰苦的道路，不能靠一时激情，也不是熬几天几夜就能学好的，必须养成平时努力学习的习惯，更加需要准确的学习方向达到有效的学习效果。

由于内容较多就只放上一个大概的大纲，需要更及详细的学习思维导图的点击我的GitHub免费获取。
还有免费的高级web全套视频教程前端架构 H5 vue node 小程序视频+资料+代码+面试题！

全方面的web前端进阶实践技术资料，并且还有技术大牛一起讨论交流解决问题。