1. Preliminary understanding
display: none; is to specify the display type of the element as no display
opacity: 0; is to set the opacity of the element to be completely transparent
visibility:hidden; is to specify the visibility of the element as hidden
overflow:hidden ; means overflow hidden, when the content exceeds the size of the parent element, the excess part is hidden
2. Explore in examples
Initial project code and pictures
<!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>
Set display: none for the red box
.box1{
display: none;
visibility: hidden;
width:200px;
height: 200px;
background-color: #ec5959;
}
It is found that the red box .box1 and its sub-element .content are invisible. At the same time, .box1 does not occupy the space, and the blue box .box2 occupies its position. The browser development tool cannot detect .box1 and changes the webpage. layout
Add any display attribute to the child element .content of the parent element .box1. The attribute value is not none, and the .content will still not be displayed
.box1 .content{
display: block;
width: 100px;
height: 100px;
background-color: #e7b93c;
}2. Set opacity for the red box: 0
.box1{
opacity: 0;
visibility: hidden;
width:200px;
height: 200px;
background-color: #ec5959;
}
It is found that the red box .box1 and its sub-element .content are invisible, but .box1 still occupies space. At the same time, the browser development tool can detect .box1 without changing the layout of the web page
Add the following floating style opacity: 1 to the parent element .box1, after the suspension, .box1 and its child elements .content will appear
.box1:hover{
opacity: 1;
}
After deleting the above suspension style, add the following style opacity: 1 to the .box1 sub-element .content, no effect after suspension
.box1 .content{
opacity: 1;
width: 100px;
height: 100px;
background-color: #e7b93c;
}
3. Set visibility:hidden for the red box
.box1{
visibility: hidden;
width:200px;
height: 200px;
background-color: #ec5959;
}It is found that the red box .box1 and its sub-element .content are invisible, but .box1 still occupies space. At the same time, the browser development tool can detect .box1 without changing the layout of the web page
Add the following suspension style visibility: visible to the parent element .box1, after the suspension, .box1 and its child elements .content will not appear
.box1:hover{
visibility: visible;
}
After deleting the above floating style, add the following style visibility:visible to the .box1 sub-element .content, and the .box1 sub-element .content will be displayed after the suspension
.box1 .content{
visibility:visible;
width: 100px;
height: 100px;
background-color: #e7b93c;
}
4、overflow:hidden
Add text beyond the size of .box2 in .box2
<div class="box">
<div class="box1">
<div class="content"></div>
</div>
<div class="box2"> 呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪</div>
</div>
Add overflow:hidden to .box2
.box2{
overflow: hidden;
width: 200px;
height: 200px;
background-color: #6fc7e9;
}
Modify the code in <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>
It is found that after adding visibility:hidden, the extra part does not take up space
3. Summary
display：none
子代元素会继承该属性，子代元素添加display：block后也不会显示
不占用空间
利用浏览器开发工具检测不到该元素
改变了网页布局
opacity: 0
子代元素会继承该属性，给该元素添加悬浮样式opacity:1后该元素和子代元素都会显示，给子代元素添加样式opacity:1子代元素不会显示
占用空间
利用浏览器开发工具可以检测到该元素
不改变网页布局
visibility: hidden
子代元素会继承该属性，给该元素添加悬浮样式visibility:visible后该元素和子代元素都不会显示，给子代元素添加样式visibility:visible子代元素显示
占用空间
利用浏览器开发工具可以检测到该元素
不改变网页布局
overflow: hidden
溢出隐藏，使用后溢出部分不占用空间