Heim >Web-Frontend >CSS-Tutorial >Lösen Sie den Unterschied zwischen Anzeige und Sichtbarkeit im CSS_Basic-Tutorial
Lösen Sie den Unterschied zwischen Anzeige und Sichtbarkeit im CSS_Basic-Tutorial
- WBOYOriginal
- 2016-05-16 12:08:492082Durchsuche
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:
[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
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: 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.)
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
Sehen Sie sich den Code und die Wirkung meines Beispiels unten an: 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:
[Strg+A, um alle auszuwählen. Hinweis:
Wenn Sie externe Js einführen müssen, müssen Sie es aktualisieren, um es auszuführen ][Strg+A, um alle auszuwählen. Hinweis:
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
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