Four hiding methods in html+css

This time I will bring you four hiding methods in html+css. What are the precautions for hiding methods in html+css. The following is a practical case, let’s take a look.

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

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

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

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

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

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

3.display:none will not affect the layout

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

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

4.position:absolute will not affect the layout

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

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

I believe you have mastered the method after reading the case in this article, please come for more exciting information Pay attention to other related articles on php Chinese website!

Recommended reading:

Several ways to clear floats

How to hide the excess part of the text

The above is the detailed content of Four hiding methods in html+css. For more information, please follow other related articles on the PHP Chinese website!