文章目录
- 前言
- 一、盒子隐藏概述
- 二、display
- 1.赋予display none属性
- 2.未加display:none;效果展示
- 2.加display:none;效果展示
- 三、visibility
- 1.visibility: hidden;
- 2.未加visibility: hidden;效果展示
- 3.加visibility: hidden;效果展示
- 四、overflow
- 1.代码示例：
- 2.不加这个属性效果展示
- 3.加hidden效果展示
- 4.加auto效果展示
- 总结
前言
合理的隐藏盒子,会有意想不到的结果
一、盒子隐藏概述
盒子的隐藏会使做出来的界面更加精致,灵活,带给用户更好的使用体验
盒子的隐藏使用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效果展示
会对盒子与超出部分进行兼容性合并
总结
盒子的隐藏尤为重要,可以将填好的表单隐藏起来,在点击特定的按钮时继续填写,可以做一些动态图片效果展示,可以极大地提高用户体验。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
