一、初步认识
display：none ；是指定元素的显示类型为不显示
opacity: 0 ； 是设置元素不透明度为完全透明
visibility:hidden ； 是指定元素的可见性为隐藏
overflow:hidden ；是指溢出隐藏，当内容超过父元素大小时，超出的部分隐藏
二、在实例中探索
初始项目代码和图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
<style>
.box{
display: flex;
}
.box1{
width:200px;
height: 200px;
background-color: #ec5959;
}
.box1 .content{
width: 100px;
height: 100px;
background-color: #e7b93c;
}
.box2{
width: 200px;
height: 200px;
background-color: #6fc7e9;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
<div class="content"></div>
</div>
<div class="box2"></div>
</div>
</body>
</html>
给红色盒子设置display：none
.box1{
display: none;
visibility: hidden;
width:200px;
height: 200px;
background-color: #ec5959;
}
发现红色盒子.box1连同其子元素.content都看不见了，同时.box1也不占据空间，蓝色盒子.box2占据了它的位置，利用浏览器开发工具不可以检测到.box1，改变了网页布局
给父元素.box1的子元素.content添加任意display属性的属性值不为none ，.content仍不会显示
.box1 .content{
display: block;
width: 100px;
height: 100px;
background-color: #e7b93c;
}2、给红色盒子设置 opacity：0
.box1{
opacity: 0;
visibility: hidden;
width:200px;
height: 200px;
background-color: #ec5959;
}
发现红色盒子.box1连同其子元素.content都看不见了，但是.box1仍然占据空间，同时利用浏览器开发工具可以检测到.box1,没有改变网页布局
给父元素.box1添加以下悬浮样式opacity: 1 ，悬浮后.box1连同其子元素.content都出现
.box1:hover{
opacity: 1;
}
删除上述悬浮样式后，给.box1子元素.content添加以下样式opacity: 1 ，悬浮后没有效果
.box1 .content{
opacity: 1;
width: 100px;
height: 100px;
background-color: #e7b93c;
}
3、给红色盒子设置visibility:hidden
.box1{
visibility: hidden;
width:200px;
height: 200px;
background-color: #ec5959;
}发现红色盒子.box1连同其子元素.content都看不见了，但是.box1仍然占据空间，同时利用浏览器开发工具可以检测到.box1,没有改变网页布局
给父元素.box1添加以下悬浮样式 visibility: visible，悬浮后.box1连同其子元素.content都不出现
.box1:hover{
visibility: visible;
}
删除上述的悬浮样式后，给.box1子元素.content添加以下样式 visibility:visible ，悬浮后.box1子元素.content显示
.box1 .content{
visibility:visible;
width: 100px;
height: 100px;
background-color: #e7b93c;
}
4、overflow:hidden
在.box2里面添加超出.box2的大小的文字
<div class="box">
<div class="box1">
<div class="content"></div>
</div>
<div class="box2"> 呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪</div>
</div>
给.box2添加overflow:hidden
.box2{
overflow: hidden;
width: 200px;
height: 200px;
background-color: #6fc7e9;
}
修改<body></body>中的代码
<body>
<div class="box">
<div class="box1">
<div class="content"></div>
</div>
<div class="box2"> 呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪</div>
</div>
<div class="box">
<div class="box1">
<div class="content"></div>
</div>
<div class="box2"> </div>
</div>
</body>
发现添加visibility:hidden后，多余部分不占用空间
三、总结
display：none
子代元素会继承该属性，子代元素添加display：block后也不会显示
不占用空间
利用浏览器开发工具检测不到该元素
改变了网页布局
opacity: 0
子代元素会继承该属性，给该元素添加悬浮样式opacity:1后该元素和子代元素都会显示，给子代元素添加样式opacity:1子代元素不会显示
占用空间
利用浏览器开发工具可以检测到该元素
不改变网页布局
visibility: hidden
子代元素会继承该属性，给该元素添加悬浮样式visibility:visible后该元素和子代元素都不会显示，给子代元素添加样式visibility:visible子代元素显示
占用空间
利用浏览器开发工具可以检测到该元素
不改变网页布局
overflow: hidden
溢出隐藏，使用后溢出部分不占用空间