Similar website advertisements disappear when we click close, but we refresh the page and will reappear!
Essence:
Give Way
one
individual
element
element
stay
page
noodles
in
latent
hide
or
person
display
show
Out
come
\color{red} {let an element be hidden or displayed in the page}
Let an element be hidden or displayed in the page
1. display attribute
The display attribute is used to set how an element should be displayed.
- display: none； hidden object
- display: block； In addition to converting to block level elements, there is also the meaning of display elements
d i s p l a y latent hide element element after ， no again occupy have primary come of position Set . \color{red}{display no longer occupies the original position after hiding the element.} display no longer occupies the original position after hiding the element.
The latter is widely used. With js, you can do a lot of web page special effects.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Show hidden elements display</title>
<style>
.peppa {
display: none;
/* display: block; */
width: 200px;
height: 200px;
background-color: pink;
}
.george {
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="peppa">Page</div>
<div class="george">George</div>
</body>
</html>
2. visibility
v i s i b i l i t y \color{red}{visibility} The visibility attribute specifies whether an element should be visible or hidden.
- visibility: visible； Element visibility
- visibility: hidden； Element hiding
v i s i b i l i t y latent hide element element after ， Follow Continued occupy have primary come of position Set . \color{red}{visibility hides the element and continues to occupy its original position.} visibility hides the element and continues to occupy its original position.
If the hidden element wants its original position, use visibility: hidden
If the hidden element does not want its original position, use display: none (more important)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Show hidden elements display</title>
<style>
.baba {
visibility: hidden;
width: 200px;
height: 200px;
background-color: pink;
}
.mama {
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="baba">Father pig</div>
<div class="mama">Mother pig</div>
</body>
</html>
3. overflow
o v e r f l o w \color{red}{overflow} The overflow attribute specifies what happens if the content overflows an element's box (exceeding its specified height and width).
| Attribute value | describe |
|---|---|
| visible | Do not cut content or add scroll bars |
| hidden | The content exceeding the object size is not displayed, and the exceeding part is hidden |
| scroll | The scroll bar is always displayed regardless of whether the content is exceeded or not |
| auto | Beyond the automatic display of the scroll bar, not beyond the display of the scroll bar |
Generally, we don't want the overflow content to be displayed, because the overflow part will affect the layout. However, if there is a positioning box, please use overflow: hidden with caution, because it will hide the redundant part.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Show hidden elements overflow</title>
<style>
.peppa {
/* overflow: visible; */
/* overflow: hidden; */
/* scroll The overflow part displays the scroll bar. If it does not overflow, the scroll bar is also displayed */
/* overflow: scroll; */
/* auto Scroll bars are displayed only when overflow occurs. Scroll bars are not displayed when overflow does not occur */
/* overflow: auto; */
width: 200px;
height: 200px;
border: 3px solid pink;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="peppa">
<Piggy page, also known as "pink pig little sister" (Taiwan is called pink pig) English. Peppa
Pig>，By the English Astley( Astley),Baker( Baker),
</div>
</body>
</html>
4. Display and hiding of elements
- display shows hidden elements but does not preserve position
- visibility shows hidden elements, but retains their original position
- Overflow overflow is displayed or hidden, but it is only partially handled