Lösen Sie den Unterschied zwischen Anzeige und Sichtbarkeit im CSS_Basic-Tutorial

Die meisten Leute verwechseln leicht die CSS-Eigenschaften Anzeige und Sichtbarkeit. Sie scheinen gleich zu sein, aber tatsächlich sind sie sehr unterschiedlich.
Das Sichtbarkeitsattribut wird verwendet, um zu bestimmen, ob das Element angezeigt oder ausgeblendet ist, was durch Visibility="visible|hidden" dargestellt wird (sichtbar bedeutet angezeigt, versteckt bedeutet ausgeblendet).
Wenn die Sichtbarkeit auf „versteckt“ eingestellt ist, befindet sich das Element zwar ausgeblendet, nimmt aber dennoch seine ursprüngliche Position ein. Beispiel:

<div onclick="toggleVisibility(this)" style="position:relative"> </div>Die erste Textzeile löst die Attribute „versteckt“ und „sichtbar“ aus. Achten Sie auf die Änderungen in der zweiten Zeile. <div> </div>Da die Sichtbarkeit die Position des Elements beibehält, ist die Position zwar unsichtbar, die Position ist jedoch immer noch vorhanden und der Inhalt der zweiten Zeile wird nicht nach oben oder unten verschoben.
[Strg+A Alle auswählen Hinweis: Wenn Sie externe Js einführen müssen, müssen Sie zum Ausführen eine Aktualisierung durchführen

]

Beachten Sie, dass das Element nach dem Ausblenden keine anderen Ereignisse mehr empfangen kann. Wenn es im ersten Teil des Codes auf „versteckt“ gesetzt ist, kann es keine Antwortereignisse mehr empfangen, sodass es nicht mehr möglich ist, auf das erste zu klicken einen mit der Maus anzeigen lassen.
Andererseits ist das Anzeigeattribut 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.
Wenn die Anzeige auf Block eingestellt ist, werden alle Elemente im Container wie ein einzelner Block behandelt, genau wie das

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

funktioniert.
Wenn Sie die Anzeige auf „inline“ setzen, verhält sie sich so, als wäre das Element inline – selbst wenn es ein ist Normale Blockelemente wie

werden auch zu einem Ausgabestream wie kombiniert.
Sehen Sie sich den Code und die Wirkung meines Beispiels unten an:

<div> <span id="blueText" onclick="toggleDisplay(this)" style="color:blue;position:relative;cursor:hand;"> </span>Klicken Sie auf den </div>blauen Text, um den Effekt zu sehen.
[Strg+A Alle auswählen Hinweis:

Wenn Sie externe Js einführen müssen, müssen Sie zum Ausführen eine Aktualisierung durchführen
]

Schließlich wird die Anzeige auf :none gesetzt, dann wird das Element tatsächlich von der Seite entfernt und die Elemente darunter werden automatisch ausgefüllt. (Zu diesem Zeitpunkt ist das Element, das display: none; anwendet, gleichbedeutend mit dem Verschwinden, während Sichtbarkeit: versteckt; nur ausgeblendet bedeutet und die Position immer noch vorhanden ist.)

Die Anzeigeattribute sind Block, Inline, Keine Werte und der Fall der Verwendung von Visibility: Hidden; Debugging-Beispiel: <h1></h1> <p>Die Anzeigeattribute sind Block, Inline, keine Werte und Debugging mit Sichtbarkeit: versteckt;<span id="oSpan" style="background-color: #CFCFCF;"> </span></p>Dies ist ein SPAN<p> in einem Satz.<input type="button" value="Inline" onclick="oSpan.style.display='inline'"> <input type="button" value="Block" onclick="oSpan.style.display='block'"> <input type="button" value="None" onclick="oSpan.style.display='none'"> <input type="button" value="Hidden" onclick="oSpan.style.visibility='hidden'"> <input type="button" value="Visible" onclick="oSpan.style.visibility='visible'"> </p> <ul> <li> </li> <li>Stellen Sie das Element auf „Blockieren“ und eine Zeile wird nach dem Element umbrochen. </li> <li>Setzen Sie ein Element auf „Inline“, wodurch der Elementumbruch entfällt. </li> </ul>Setzen Sie das Element auf „Keine“, um den Inhalt des Elements auszublenden.
[Strg+A, um alle auszuwählen. Hinweis:

Wenn Sie externe Js einführen müssen, müssen Sie es aktualisieren, um es auszuführen ]
Gleichzeitig können Sie sich zum Unterschied zwischen display:inline; und float:left; auf diesen Artikel beziehen:
(display bezieht sich auf den Anzeigestatus, inline bezieht sich auf inline, was durch Sein gekennzeichnet ist In der Nähe des vorherigen Inline-Elements sind die Standard-Inline-Elemente normalerweise span, a, em, strong usw. Und float bedeutet schwebend, float: left ist die schwebende Form für Elemente auf Blockebene und es gibt zwei verschiedene Zustände)
http. ://www.andymao.com/andy/post/42.html
http://bbs.blueidea.com/thread-2596793-1-1.html

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>float &inline</title> <style> *{text-align:center;padding:4px;} div,p{text-align:left;} span{/*float:right;*/ background:#f5f5f5;border-left:1px #eee solid;border-top:1px #eee solid;border-right:1px #ccc solid;border-bottom:1px #ccc solid;} ul#inline li{ display:inline; list-style:none;border-left:1px #ccc solid;width:300px; background:#f5f5f5;/* float:left*/;} ul#float li{ float:left;display:inline; list-style:none;border-left:1px #666 solid;width:300px; background:#f5f5f5; } </style> <span style="width:300px;">Span ist ein Inline/Inline-Element und die Zuweisung einer Breite hat keine Auswirkung. </span> <span style="width:100px; float:right;">span ist ein Inline/Inline-Element. Geben Sie ihm eine Breite von 100px+float:right; Sie k枚nnen sehen, dass es eine Breite hat. </span> <div> <p>Dieses Li ist als Inline/Inline definiert und das Festlegen der Breite hat keine Auswirkung</p> <ul id="inline"> <li>Testen</li> <li>Testen</li> </ul> </div> <div> <p>Dieses Li ist als inline/inline+float:left definiert und das Festlegen der Breite hat einen Effekt</p> <ul id="float"> <li>Testen</li> <li>Testen</li> </ul> </div>

Stellungnahme：

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

Vorheriger Artikel：CSS verwendet den js-Ausdruck, um den Austausch von effects_Experience zu erreichenNächster Artikel：CSS verwendet den js-Ausdruck, um den Austausch von effects_Experience zu erreichen

In Verbindung stehende Artikel

Mehr sehen

• Zusammenfassung von sechs Implementierungsmethoden des JSDOMReady-Ereignisses
• Beispiele für die CSS-Implementierung verschiedener Spaltenlayouts auf der Seite
• Reine CSS3-Vollbild-Diashow-Effekte
• Reiner CSS3-Stil mit coolen, farbenfrohen 3D-Schaltflächen
• Atemberaubende sechseckige CSS3-Menüanimationseffekte

• Heim

• Kurs

• Fragen und Antworten

• Mein

• Heim
• Kurs
• Artikel
• Fragen und Antworten
• Wörterbuch
• Handbuch
• Herunterladen
• Thema

Heim

Artikel

Fragen und Antworten

Kurs

Thema

Herunterladen

Spiel

Wörterbuch

简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）