Four css Hiding Methods and four css Hiding Methods
1. opacity: 0 only hides elements, but occupies the layout, so it still has an impact on the layout.
<Div class = "div1">
Snda: opacity: 0 only hides elements, but occupies the layout, so it still has an impact on the layout.
</Div>
<P> ppskdkad </p>
. Div1 {
Opacity: 0;
Width: 200px;
Height: 200px;
Border: 1px solid red;
}
2. visibility: hidden only hides elements, but occupies the layout.
<Div class = "div2">
This is the second div visibility: hidden, or only hides the element, but occupies the layout.
</Div>
<P> check the effect. </p>
. Div2 {
Visibility: hidden;
Width: 200px;
Height: 200px;
Border: 1px solid red;
}
3. display: none does not affect the layout.
<Div class = "div3">
This is the third DIV display: none, which does not affect the layout.
</Div>
<P> do not believe it. </p>
. Div3 {
Display: none;
Width: 200px;
Height: 200px;
Border: 1px solid red;
}
4. position: absolute does not affect the layout.
<Div class = "div4">
This is the fourth div. I don't think it will affect the layout, but it won't affect the layout either.
</Div>
<P> check </p>
. Div4 {
Position: absolute;
Top:-9999px;
Left:-9999px;
Width: 200px;
Height: 200px;
Border: 1px solid red;
}