1.opacity:0 just hides the elements, but still occupies the layout, so it still has an impact on the layout.
<pclass= "P1" >snda:opacity:0 just hides the elements, but still occupies the layout, so it still has an impact on the layout </p><p>ppskdkad</p>
. p1{opacity:0;width:200px;height:200px;border:1pxsolidred;}
2.visibility:hidden still just hides the elements, but it still occupies the layout.
<pclass= "P2" > This is the second P Visibility:hidden or just hides the element, but still occupies the layout </p><p> look at the effect </p>
. p2{visibility:hidden;width:200px;height:200px;border:1pxsolidred;}
3.display:none does not affect the layout
<pclass= "P3" > This is the third P Display:none does not affect the layout </p><p> don't believe you see </p>
. p3{display:none;width:200px;height:200px;border:1pxsolidred;}
4.position:absolute does not affect the layout
<pclass= "P4" > This is the fourth P I don't think it's going to affect the layout. But it doesn't really affect the layout </p><p> look at the </p>v
. p4{position:absolute;top:-9999px;left:-9999px;width:200px;height:200px;border:1pxsolidred;}
These four kinds of hidden ways have you learned? Give it a try.