Detaillierte Erläuterung des Unterschieds zwischen Anzeige- und Sichtbarkeitsattributen in div

Der Unterschied zwischen den Anzeige- und Sichtbarkeitsattributen in p

Der Unterschied zwischen den Anzeige- und Sichtbarkeitsattributen in p ist ziemlich groß. Obwohl sowohl die Sichtbarkeits- als auch die Anzeigeattribute den Zweck erfüllen können, Seitenelemente auszublenden, sind ihre Der Unterschied liegt darin, wie auf den normalen Dokumentenfluss reagiert wird.

In diesem Abschnitt wird der Unterschied zwischen Anzeige und Sichtbarkeit in p beschrieben. Das Sichtbarkeitsattribut verbirgt das Element, behält jedoch die schwebende Position des Elements bei, während die Anzeige tatsächlich die schwebenden Eigenschaften festlegt Der Zweck des Ausblendens von Seitenelementen kann zwar beide erreicht werden, der Unterschied zwischen ihnen liegt jedoch in der Art und Weise, wie sie auf den normalen Dokumentenfluss reagieren.

Der Unterschied zwischen Anzeige- und Sichtbarkeitsattributen in p

Sichtbarkeitsattribut:

bestimmt, ob das Element angezeigt oder ausgeblendet wird ;
visibility = „sichtbar|versteckt“, „sichtbar“ wird angezeigt, „versteckt“ ist verborgen.

Wenn die Sichtbarkeit auf „versteckt“ eingestellt ist, befindet sich das Element zwar ausgeblendet, aber immer noch an seiner ursprünglichen Position.

Zum Beispiel:

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

Siehe erste Zeile: aufgrund des Einflusses von „versteckt“ und „sichtbar“. Da die Sichtbarkeit die Position des Elements beibehält, wird die zweite Zeile nicht verschoben.
Beachten Sie, dass das Element keine anderen Ereignisse mehr empfangen kann, wenn es also „versteckt“ wird Es werden keine Antwortereignisse mehr empfangen, daher kann es nicht angezeigt werden, indem man mit der Maus auf den ersten Text klickt.

Anzeigeattribut:

ist etwas anders. Das Sichtbarkeitsattribut verbirgt das Element, behält aber seine schwebende Position bei, während display tatsächlich die schwebenden Eigenschaften des Elements festlegt.

Block:
Wenn die Anzeige auf Block eingestellt ist, werden alle Elemente im Container wie ein einzelner Block behandelt, genau wie das e388a4556c0f65e1904146cc1a846bee-Element, das Punkte auf der Seite platziert. (Sie können den display:block von 45a2772a6b6107b401db3c9b82c049c2 tatsächlich so einstellen, dass er wie e388a4556c0f65e1904146cc1a846bee funktioniert.

inline:
Wenn Sie die Anzeige auf „inline“ setzen, verhält sie sich und das Element „inline“ Gleiches – -- auch wenn es sich um ein normales Blockelement wie e388a4556c0f65e1904146cc1a846bee handelt, wird es zu einem Ausgabestream wie 45a2772a6b6107b401db3c9b82c049c2 zusammengefasst

none:
Schließlich wird die Anzeige eingestellt: none, dann das Das Element wird tatsächlich von der Seite entfernt und die Elemente darunter werden automatisch ausgefüllt.

Zum Beispiel:

Sehen Sie sich den Code und die Wirkung meines Beispiels unten an:
Beispiel :

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

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Unterschieds zwischen Anzeige- und Sichtbarkeitsattributen in div. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!