Four css Hiding Methods and four css Hiding Methods

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;
}