隐藏元素的方法
1、display
通过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>我的第一个页面</title>
<style>
.box1 {
width: 500px;
height: 150px;
border: 1px solid red;
}
.smallBox {
border: 1px solid blue;
padding: 5px;
width: 50%;
height: 40px;
font-weight: bold;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="smallBox">
我是smallBox盒子
</div>
</div>
</body>
</html>
使用：
<style>
.box1 {
width: 500px;
height: 150px;
border: 1px solid red;
}
.smallBox {
border: 1px solid blue;
padding: 5px;
width: 50%;
height: 40px;
font-weight: bold;
background-color: yellow;
display: none;
}
</style>
当我们把display设置为block的时候可以再次显示：
2、visibility
通过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>我的第一个页面</title>
<style>
.box1 {
width: 500px;
height: 150px;
border: 1px solid red;
}
.smallBox111 {
border: 1px solid blue;
padding: 5px;
width: 50%;
height: 40px;
font-weight: bold;
background-color: yellow;
}
.smallBox222 {
border: 1px solid red;
padding: 5px;
width: 50%;
height: 40px;
font-weight: bold;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1">
<div class="smallBox111">
我是smallBox盒子111
</div>
<div class="smallBox222">
我是smallBox盒子222
</div>
</div>
</body>
</html>
使用：
<style>
.box1 {
width: 500px;
height: 150px;
border: 1px solid red;
}
.smallBox111 {
border: 1px solid blue;
padding: 5px;
width: 50%;
height: 40px;
font-weight: bold;
background-color: yellow;
visibility: hidden;
}
.smallBox222 {
border: 1px solid red;
padding: 5px;
width: 50%;
height: 40px;
font-weight: bold;
background-color: pink;
}
</style>
能够发现这个元素已经不存在了在市占用的文档流位置还是存在的。
当我们把visibility设置为visible的时候可以再次显示：
3、opacity
透明度 0 完全透明 实现元素的不可见
<!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>我的第一个页面</title>
<style>
.box1 {
width: 500px;
height: 150px;
border: 1px solid red;
}
.smallBox111 {
border: 1px solid blue;
padding: 5px;
width: 50%;
height: 40px;
font-weight: bold;
background-color: yellow;
opacity: 0;
}
.smallBox222 {
border: 1px solid red;
padding: 5px;
width: 50%;
height: 40px;
font-weight: bold;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1">
<div class="smallBox111">
我是smallBox盒子111
</div>
<div class="smallBox222">
我是smallBox盒子222
</div>
</div>
</body>
</html>
也是依然占位当我们设置为1的时候可以显示
4、其他
4.1、设置元素位置，让其消失
position：absolute top:0 left：-100
4.2、overflow属性实现，将要隐藏元素移出父元素的范围
4.3、filter属性-- filter:Alpha(opacity=x)
兼容性：仅支持IE6、7、8、9，在IE10及以上版本中被移除
取值范围 0(完全透明)<x<100(完全不透明)
4.4、rgba(r,g,b,a)—用于颜色的不透明度设置
兼容性：IE6\7\8\不支持，IE9及更早版本的浏览器都支持
Red green blue 0-255
Alpha 0-1
