Quatre méthodes de masquage en html+css

Cette fois, je vais vous présenter quatre méthodes de masquage en html+css. Quelles sont les précautions concernant les méthodes de masquage en html+css. Ce qui suit est un cas pratique, jetons un coup d'œil.

1.opacity:0 masque uniquement l'élément, mais occupe toujours la mise en page, donc cela affecte toujours la mise en page

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

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

2 .visibilité : caché cache toujours simplement l'élément, mais occupe toujours la mise en page

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

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

3.affichage : aucun n'affectera pas la mise en page

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

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

4.position : l'absolu n'affectera pas la mise en page

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Plusieurs façons d'effacer les flottants

Comment masquer la partie excédentaire du texte

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!