Posted in HTML / CSS onFebruary 28, 2022
前言：
合理的隐藏盒子,会有意想不到的结果
一、盒子隐藏概述
- 盒子的隐藏会使做出来的界面更加精致,灵活,带给用户更好的使用体验
- 盒子的隐藏使用css与js会有更好的动画效果
盒子隐藏的几种方式：
1.display:none;
将盒子隐藏起来,并且放弃之前占有的位置
2.visibility:hidden;
盒子隐藏起来,不放弃自己占有的位置
3.overflow:hidden;
一般用于针对盒子内的东西,如果超出盒子的大小
就对超出的部分进行隐藏,也可以对超出的部分进行,滚动浏览
这三种隐藏方式各有各的优点
二、display
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效果展示
- 会对盒子与超出部分进行兼容性合并
总结：
盒子的隐藏尤为重要,可以将填好的表单隐藏起来,在点击特定的按钮时继续填写,可以做一些动态图片效果展示,可以极大地提高用户体验。
到此这篇关于 分享CSS盒子模型隐藏的几种方式的文章就介绍到这了,更多相关CSS盒子模型隐藏的几种方式内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章，希望大家以后多多支持三水点靠木！
分享CSS盒子模型隐藏的几种方式
- Author -
酷尔。声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@