Explication détaillée de la différence entre les attributs d'affichage et de visibilité dans div

La différence entre les attributs d'affichage et de visibilité dans p

La différence entre les attributs d'affichage et de visibilité dans p est assez grande Bien que les attributs Visibilité et Affichage puissent atteindre l'objectif de masquer les éléments de la page, leur. la différence réside dans la façon de répondre au flux de documents normal

Cette section décrit la différence entre l'affichage et la visibilité dans p. L'attribut de visibilité masque l'élément mais maintient la position flottante de l'élément, tandis que l'affichage définit en fait les caractéristiques flottantes. de l'élément, bien qu'ils puissent tous deux être atteints. L'objectif est de masquer les éléments de la page, mais ce qui les différencie est la manière dont ils répondent au flux normal des documents.

La différence entre les attributs d'affichage et de visibilité dans p

attribut de visibilité :

détermine si l'élément est affiché ou masqué ;
visibility ="visible|hidden", visible est affiché, caché est masqué.

Lorsque la visibilité est définie sur "cachée", bien que l'élément soit masqué, il occupe toujours sa position d'origine.

Par exemple :

<scriptlanguagescriptlanguage="javascript"> functiontoggleVisibility(me)  
{  
if(me.style.visibility=="hidden")  
{  
me.style.visibility="visible";  
}  
else  {  
me.style.visibility="hidden";  
}  
}  
</script> 
 
<ponclickponclick="toggleVisibility(this)"style="position:relative"> 第一行文本将会触发"hidden"和"visible"属性，注意第二行的变化。  
</p> 
<p>因为visibility会保留元素的位置，所以第二行不会移动.</p>

Voir la première ligne : en raison de l'influence du "caché" et du "visible". Parce que la visibilité conserve la position de l'élément, la deuxième ligne ne bougera pas
Notez que lorsque l'élément est masqué, il ne peut plus recevoir d'autres événements, donc lorsque la première ligne de code devient "masquée", elle ne le peut plus. ne reçoit plus d'événements de réponse, il ne peut donc pas être affiché en cliquant sur le premier texte avec la souris.

attribut d'affichage :

est un peu différent. L'attribut de visibilité masque l'élément mais conserve sa position flottante, tandis que display définit en fait les caractéristiques flottantes de l'élément.

bloquer :
Lorsque l'affichage est défini sur bloquer, tous les éléments du conteneur seront traités comme un seul bloc, tout comme l'élément e388a4556c0f65e1904146cc1a846bee (Vous pouvez en fait définir le display:block de 45a2772a6b6107b401db3c9b82c049c2 pour qu'il fonctionne comme e388a4556c0f65e1904146cc1a846bee.

inline :
Définir l'affichage sur inline le fera se comporter et l'élément en ligne Idem - -- même s'il s'agit d'un élément de bloc normal comme e388a4556c0f65e1904146cc1a846bee, il sera combiné en un flux de sortie comme 45a2772a6b6107b401db3c9b82c049c2

aucun :
Enfin, l'affichage est défini : aucun, puis le L'élément est en fait supprimé de la page et les éléments en dessous seront automatiquement remplis.

Par exemple :

Regardez le code et l'effet de mon exemple ci-dessous :
Exemple. :

<scriptlanguagescriptlanguage="javascript"> functiontoggleDisplay(me){  
if(me.style.display=="block"){  
me.style.display="inline";  
alert("文本现在是：&#39;inline&#39;.");  
}  
else{  
if(me.style.display=="inline"){  
me.style.display="none";  
alert("文本现在是:&#39;none&#39;.3秒钟后自动重新显示。");  
window.setTimeout("blueText.style.display=&#39;block&#39;;",3000,"javascript");  
}  
else{  
me.style.display="block";  
alert("文本现在是:&#39;block&#39;.");  
}  
}  
}  
</script> 
 
<p>在<spanidspanid="blueText"onclick="toggleDisplay(this)"  style="color:blue;position:relative;cursor:hand;"> 蓝色</span>文字上点击来查看效果.</p>

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!