Detailed explanation of the four hidden methods of css code

1.opacity:0 only hides the element, but still occupies the layout, so it still affects the layout

<pclass="p1">
snda:opacity:0只是把元素隐藏起来了 ，但是还是占有布局，所以还是对布局有影响
</p>
<p>ppskdkad</p>

.p1{
opacity:0;
width:200px;
height:200px;
border:1pxsolidred;
}

2.visibility: hidden still just hides the element, but still occupies the layout

<pclass="p2">
这是第二个p visibility:hidden还是只是把元素隐藏了，但是还是占有布局
</p>
<p>看看效果</p>

.p2{
visibility:hidden;
width:200px;
height:200px;
border:1pxsolidred;
}

3.display:none will not Affects the layout

<pclass="p3">
这是第三个p display:none不会影响到布局
</p>
<p>不信你看</p>

.p3{
display:none;
width:200px;
height:200px;
border:1pxsolidred;
}

4.position:absolute will not affect the layout

<pclass="p4">
这个是第四个p 我觉得也不会影响到布局 但是到底会不会 一起来看看吧 果然这个也不会影响到布局
</p>
<p>看看</p>v

.p4{
position:absolute;
top:-9999px;
left:-9999px;
width:200px;
height:200px;
border:1pxsolidred;
}

Have you learned the above four hiding methods? Hurry up and give it a try.

Related recommendations:

Comprehensive summary of attribute value inheritance knowledge in CSS

Comprehensive methods of customizing text omission in pure CSS

20 Advanced CSS Tips Summary

The above is the detailed content of Detailed explanation of the four hidden methods of css code. For more information, please follow other related articles on the PHP Chinese website!