Maison > interface Web > tutoriel CSS > le corps du texte

Quatre méthodes de masquage en html+css

php中世界最好的语言
Libérer: 2018-03-22 11:51:24
original
2336 Les gens l'ont consulté

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>
Copier après la connexion
.p1{
opacity: 0;
width:200px;
height:200px;
border:1px solid red;
}
Copier après la connexion

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>
Copier après la connexion
.p2{
visibility: hidden;
width:200px;
height:200px;
border:1px solid red;
}
Copier après la connexion

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

<p class="p3">
这是第三个p display:none不会影响到布局 
</p>
<p>不信你看</p>
Copier après la connexion
.p3{
display: none;
width:200px;
height:200px;
border:1px solid red;
}
Copier après la connexion

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

<strong><p class="p4"><br>这个是第四个p 我觉得也不会影响到布局 但是到底会不会 一起来看看吧 果然这个也不会影响到布局 <br></p><br><p>看看</p>v</strong>
Copier après la connexion
.p4{
position: absolute;
top:-9999px;
left:-9999px;
width:200px;
height:200px;
border:1px solid red;
}
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal