1.display:none
Set the Display property to none, using this property, the hidden element does not occupy any space. In this way the effect is as if the element does not exist at all, and the descendant elements of this element are also hidden. That is, the element disappears completely on the page, and in layman's terms it cannot be seen or touched.
Example: Using style "display:none" to hide elements
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.a1{width: 100px;height: 100px;background: red;display: none;}
.a2{width: 100px;height: 100px;background: yellow;}
</style>
</head>
<body>
<div class="a1">have a nice day</div>
<div class="a2">have a nice day</div>
</body>
</html>
2, opacity
The property is to set the opacity of the object. When his transparency is 0, it visually disappears, but he still occupies that position, which is generally invisible but tangible. And for the layout of the web page, the elements of the attribute are added, and its background and element content will also change.
Example: Hide the element with the style "opacity:0"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.a1{width: 100px;height: 100px;background: red;opacity: 0;}
.a2{width: 100px;height: 100px;background: yellow;}
</style>
</head>
<body>
<div class="a1">have a nice day</div>
<div class="a2">have a nice day</div>
</body>
</html>
3, visibility: hidden
When the attribute value is set to hidden, the element will be hidden, but the space occupied by the object on the webpage has not changed. In general, it is invisible but can be touched. And for the layout of the page, this property is similar to the opacity property, but the only difference from opacity is that it does not respond to any user interaction.
Example: Hide the element with the style "visibility: hidden"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.a1{width: 100px;height: 100px;background: red;visibility: hidden;}
.a2{width: 100px;height: 100px;background: yellow;}
</style>
</head>
<body>
<div class="a1">have a nice day</div>
<div class="a2">have a nice day</div>
</body>
</html>
The above describes three hidden methods, each of which is different. In actual projects, which one should be used depends on the situation.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
