Explication détaillée des quatre méthodes cachées du code CSS

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

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

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

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

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

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

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

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

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

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

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

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

Les quatre ci-dessus Avez-vous appris à se cacher ? Dépêchez-vous et essayez-le.

Recommandations associées :

Résumé complet des connaissances sur l'héritage des valeurs d'attribut en CSS

Méthodes complètes de personnalisation de l'omission de texte en CSS pur

Résumé de 20 astuces CSS avancées

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!