Inhaltsverzeichnis
Der Unterschied zwischen den Anzeige- und Sichtbarkeitsattributen in p
Heim Web-Frontend CSS-Tutorial Detaillierte Erläuterung des Unterschieds zwischen Anzeige- und Sichtbarkeitsattributen in div

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

Jul 24, 2017 am 10:38 AM
display 属性

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>
Nach dem Login kopieren

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

-Element, das Punkte auf der Seite platziert. (Sie können den display:block von tatsächlich so einstellen, dass er wie

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

handelt, wird es zu einem Ausgabestream wie 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>
Nach dem Login kopieren

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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Die Preiserwartungen für die Fujifilm X-M5 steigen, da das durchgesickerte Selfie-Display die ehemals erschwingliche Kamerareihe komplexer macht Die Preiserwartungen für die Fujifilm X-M5 steigen, da das durchgesickerte Selfie-Display die ehemals erschwingliche Kamerareihe komplexer macht Sep 07, 2024 am 09:34 AM

Fujifilm-Fans waren kürzlich sehr gespannt auf die Aussicht auf die X-T50, da sie eine Neuauflage der preisgünstigen Fujifilm X-T30 II darstellte, die in der APS-C-Kategorie unter 1.000 US-Dollar recht beliebt geworden war. Leider ist die Fujifilm X-T50 auf den Markt gekommen

Samsung: Neues, großes Display auf Basis der E-Ink-Technologie zeigt Farben an und kommuniziert drahtlos Samsung: Neues, großes Display auf Basis der E-Ink-Technologie zeigt Farben an und kommuniziert drahtlos Jun 19, 2024 pm 03:37 PM

Wir berichten häufig über Geräte, die auf Displays mit elektronischer Tinte basieren, wie zum Beispiel E-Reader. Die Technologie bietet eine Reihe von Vorteilen: Sie kann in hellen Umgebungen ohne Hintergrundbeleuchtung gelesen werden und benötigt beim Schalten ohne Licht nur Strom

Pythons dir()-Funktion: Zeigen Sie die Eigenschaften und Methoden eines Objekts an Pythons dir()-Funktion: Zeigen Sie die Eigenschaften und Methoden eines Objekts an Nov 18, 2023 pm 01:45 PM

Dir()-Funktion von Python: Eigenschaften und Methoden eines Objekts anzeigen, spezifisches Codebeispiel erforderlich Zusammenfassung: Python ist eine leistungsstarke und flexible Programmiersprache und ihre integrierten Funktionen und Tools bieten Entwicklern viele praktische Funktionen. Eine der sehr nützlichen Funktionen ist die Funktion dir(), die es uns ermöglicht, die Eigenschaften und Methoden eines Objekts anzuzeigen. In diesem Artikel wird die Verwendung der Funktion dir() vorgestellt und ihre Funktionen und Verwendungen anhand spezifischer Codebeispiele demonstriert. Text: Die dir()-Funktion von Python ist eine integrierte Funktion.

anzeigen, was es bedeutet anzeigen, was es bedeutet Oct 26, 2023 am 11:50 AM

Unter Anzeige versteht man in der Regel den Vorgang oder die Funktion, dem Benutzer Daten, Informationen oder Ergebnisse auf irgendeine Weise anzuzeigen oder auf einem Bildschirm oder einem anderen Gerät auszugeben. Spezifische Bedeutung: 1. In der Befehlszeilenschnittstelle (CLI) kann sich „Anzeige“ auf die Ausgabe von Daten in Text, Tabellen oder anderen Formaten im Terminalfenster beziehen, damit Benutzer sie anzeigen oder analysieren können. 2. In der grafischen Benutzeroberfläche (GUI) „Anzeige“. kann sich auf die Anzeige von Bildern, Text, Diagrammen und anderen Inhalten im Anwendungsfenster oder auf der Benutzeroberfläche zur Benutzerinteraktion oder zum Durchsuchen usw. beziehen.

Welche Werte hat die Anzeige? Welche Werte hat die Anzeige? Nov 20, 2023 pm 05:28 PM

Zu den Anzeigewerten gehören Block, Inline, None, Inline-Block, Flex, Grid, Table, Inline-Table und List-Item. Detaillierte Einführung: 1. Block, der Elemente in Elemente auf Blockebene umwandelt, bildet einen Block auf der Seite und belegt nur eine Zeile. 2. Inline, wodurch Elemente in Inline-Elemente umgewandelt werden. Inline-Elemente belegen keine eigene Zeile und können neben anderen Elementen stehen. 3. Keine, dieser Wert gibt an, dass das Element nicht auf der Seite usw. sein wird.

Google Pixel 9 Pro XL belegt den 2. Platz im „globalen' Smartphone-Kamera-Ranking von DxOMark Google Pixel 9 Pro XL belegt den 2. Platz im „globalen' Smartphone-Kamera-Ranking von DxOMark Aug 23, 2024 am 06:42 AM

Googles neue Pixel-9-Serie hat eine neue Variante eingeführt, die es in früheren Modellreihen nicht gab: das Pixel 9 Pro XL. Es ist im Wesentlichen identisch mit der Nicht-XL-Variante (bei Amazon vorbestellen), verfügt aber, wie der Name schon sagt, über einen größeren Bildschirm. Die beiden e

Welche Rolle spielt das pageXOffset-Attribut in JavaScript? Welche Rolle spielt das pageXOffset-Attribut in JavaScript? Sep 16, 2023 am 09:17 AM

Wenn Sie die Pixel ermitteln möchten, um die das Dokument von der oberen linken Ecke des Fensters gescrollt wird, verwenden Sie die Eigenschaften pageXoffset und pageYoffset. Verwenden Sie pageXoffset für horizontale Pixel. Beispiel Sie können versuchen, den folgenden Code auszuführen, um zu lernen, wie Sie das pageXOffset-Attribut in JavaScript verwenden – Live-Demonstration <!DOCTYPEhtml><html> <head> <style> &amp

Bottom-Attributsyntax in CSS Bottom-Attributsyntax in CSS Feb 21, 2024 pm 03:30 PM

Syntax und Codebeispiele für das Bottom-Attribut in CSS In CSS wird das Bottom-Attribut verwendet, um den Abstand zwischen einem Element und dem Boden des Containers anzugeben. Es steuert die Position eines Elements relativ zum unteren Rand seines übergeordneten Elements. Die Syntax des unteren Attributs lautet wie folgt: element{bottom:value;} wobei element das Element darstellt, auf das der Stil angewendet werden soll, und value den festzulegenden unteren Wert darstellt. Der Wert kann ein bestimmter Längenwert sein, z. B. Pixel

See all articles