Allgemeine CSS-Anzeigeeigenschaften (Inline blockieren, keine) und Tutorials zur Verwendung

Das Anzeigeattribut

gibt den Typ der Box an, die das Element generieren soll.

Dieses Attribut wird verwendet, um die Art des Anzeigefelds zu definieren, das vom Element beim Erstellen eines Layouts generiert wird. Bei Dokumenttypen wie HTML kann die unvorsichtige Verwendung der Anzeige gefährlich sein, da sie möglicherweise die bereits in HTML definierte Anzeigehierarchie verletzt. Da XML nicht über diese Art von Hierarchie verfügt, ist die gesamte Anzeige unbedingt erforderlich.

1. Detaillierte Einführung in das Anzeigeattribut

1 Erklärung möglicher Werte des Anzeigeattributs von CSS

Der folgende Editor bringt Ihnen einen Artikel über die möglichen Werte des Display-Attributs von CSS. Der Herausgeber findet es ziemlich gut, deshalb teile ich es jetzt mit Ihnen und gebe es als Referenz. Folgen wir dem Editor und schauen wir uns None an. Dieses Element wird nicht angezeigt.
block Dieses Element wird als Element auf Blockebene angezeigt, mit Zeilenumbrüchen vor und nach diesem Element.

2. Detaillierte Einführung in das Anzeigeattribut in CSS

Alle gängigen Browser unterstützen das Anzeigeattribut.

Hinweis: Wenn !DOCTYPE angegeben ist, unterstützt Internet Explorer 8 (und höher) die Attributwerte „inline-table“, „run-in“, „table“, „table-caption“, „ „table-cell“, „table-column“, „table-column-group“, „table-row“, „table-row-group“ und „inherit“.

3. Detaillierte Erläuterung des Unterschieds zwischen Anzeige und Sichtbarkeit

Sichtbarkeit versteckter Objekte behält auch den physischen Raum bei, den das Objekt einnimmt, wenn es angezeigt wird Anzeige nicht.

Vilibility: versteckt (versteckt), sichtbar (Anzeige) style="vislbility:hidden"

Anzeige: keine (versteckt), Block (Anzeige) style="display:none"

4. Detailliertes Verständnis von (Anzeige, Float, Position) in CSS

Anzeige wird verwendet, um den Anzeigemodus von Elementen festzulegen

Anzeige: block |. none |. inline

inline: Geben Sie das Objekt als Inline-Element an

block: Geben Sie das Objekt als Blockelement an

none: Verstecktes Objekt

2. Detaillierte Einführung des Displayblock-Attributs

1 Was soll ich tun, wenn Displayblock- oder Inlineblock-Elemente nicht in Chrome angezeigt werden können?

Was soll ich tun, wenn ein display:inline-block oder display:block-Element unter Chrome nicht normal angezeigt werden kann?
Die DEMO-Seite hat nur ein Eingabefeld, wenn das Eingabefeld den Fokus hat , die Höhe wird größer und die Anzeige der Wortanzahl und die Schaltfläche „Antworten“ werden angezeigt.
Das Problem besteht nun darin, dass Chrome erst nach der ersten Aktualisierung auf das Eingabefeld klicken kann und die Höhe zunimmt und die Elemente der Wortanzahlanzeige und der Antwortschaltfläche angezeigt werden. Wenn Sie jedoch zum zweiten Mal auf das Eingabefeld klicken, werden nur die Elemente angezeigt Die Höhe wird erhöht, aber Sie werden es nicht sehen. Es ist Zeit, die Elemente der Wortanzahl und der Antwortschaltfläche anzuzeigen (Firefox ist normal)

2

Das Anzeigeattribut legt den Anzeigemodus des Elements fest, die entsprechende Skriptfunktion ist Anzeige und die optionalen Werte sind „Keine“, „Block“ und „Inline“. Die Beschreibung jedes Werts lautet wie folgt:

none verbirgt das Element und behält den Platz nicht bei, wenn das Element angezeigt wird.
Elemente im Blockmodus anzeigen.
inline zeigt das Element inline an.

3.

Der Grund, warum der Zeilenumbruch von li innerhalb des Blocks in IE11 ungültig ist

Kürzlich habe ich eine Liste erstellt Webseiten-Tags, die erfordern, dass Zeilenumbruch nicht zulässig ist, dachte ich zunächst, es wäre einfacher, und ich habe den Code mit ein paar Klicks fertig geschrieben und den Test in den Browsern Firefox und Chrome bestanden IE11 hat unerwarteterweise nicht die erwarteten Ergebnisse erzielt. li inside-block hat in IE11 nicht funktioniert. Ich ändere immer noch die Linie!

3. Detaillierte Einführung von display:inline-attribut

1.Detaillierte Erklärung von display:flex||inline-flex in CSS-Attribute

Flex ist die Abkürzung für Flexible Box, was „flexibles Layout“ bedeutet und verwendet wird, um dem Box-Modell maximale Flexibilität zu bieten. Jeder Container kann als Flex-Layout festgelegt werden.

flex: Zeigt das Objekt als flexible Box an

inline-flex: Zeigen Sie das Objekt als elastische Box auf Inline-Blockebene an

2. Detaillierte Erklärung, wie die durch display:inline-block im CSS-Layout verursachte Lücke geschlossen werden kann

Ich habe display:inline-block verwendet, als ich in H5 horizontale Schiebekarten erstellt habe; Dieselbe horizontale Linie Es wurde eine Lücke erstellt, was offensichtlich nicht der von mir gewünschte Effekt war, also wechselte ich zu „Left Floating“. Dies löste das Lückenproblem, erforderte jedoch die Einstellung der Breite des übergeordneten Elements, um einen horizontalen Bildlauf nach links und rechts zu erreichen, was zunahm Da die Anzahl der Karten nicht festgelegt ist und die Breite des übergeordneten Elements in Echtzeit festgelegt werden muss, ist die Verwendung von js erforderlich, sodass die Codemenge zunimmt und nicht die beste ist Auswahl. Es scheint, dass die beste Lösung die Verwendung von display:inline-block; ist, sodass das Lückenproblem auftritt

4. Detaillierte Einführung des display:none-Attributs

1.

Was sind die Unterschiede zwischen „display:none“ und „visibility:hidden“?

Was ich damals geantwortet habe, war, dass beide Elemente ausblenden können, dies jedoch nach dem Element tun wird Wenn Sie auf display:none; setzen, wird gleichzeitig der zuvor vom Element belegte Dokumentflussbereich gelöscht. Visibility:hidden führt jedoch dazu, dass das Element auch dann noch Platz einnimmt, wenn es nicht angezeigt wird.

Es war ein Telefoninterview, nachdem ich die Frage beantwortet hatte, fragte die andere Partei nicht weiter nach anzeigebezogenem Wissen.
Wenn ich jetzt darüber nachdenke, habe ich wirklich Glück, wenn mich jemand nach Wissen zum Thema Anzeige fragt, muss ich darauf achten, worauf ich bei der Verwendung von Anzeige achten muss: Inline-Block. Ich werde definitiv nicht kämpfen können.

2.

Erklärung von 5 Möglichkeiten, Seitenelemente mit CSS auszublenden

Es gibt viele Möglichkeiten, Seitenelemente mit CSS auszublenden. Sie können die Deckkraft auf 0, die Sichtbarkeit auf „Ausgeblendet“, die Anzeige auf „Keine“ oder die Position auf „Absolut“ setzen und dann die Position auf den unsichtbaren Bereich festlegen.

Haben Sie sich jemals gefragt, warum wir so viele Techniken haben, um Elemente zu verbergen, aber alle den gleichen Effekt zu erzielen scheinen? Tatsächlich weist jede Methode einige subtile Unterschiede zu den anderen auf, und diese Unterschiede bestimmen, welche Methode in einer bestimmten Situation verwendet wird. In diesem Tutorial werden die kleinen Unterschiede behandelt, die Sie beachten müssen, sodass Sie unter den oben genannten Methoden die geeignete Methode zum Ausblenden von Elementen je nach Situation auswählen können

3

Beispiele für die Anzeige versteckter Divs mithilfe des CSS3-Tutorials

Es gibt viele Möglichkeiten, einen p-Spezialeffekt ein- und auszublenden. Im Folgenden erfahren Sie, wie Sie ihn mit reinem CSS3 implementieren.

5. Verwandte Fragen und Antworten

1. Gibt es einen Unterschied zwischen

a{display:block;} und der Anzeige in JS?

2.

Benötigen sowohl li als auch ul display: inline?

3.

css – Unterschiede zwischen Flex-Layout, display:flex und display:-webkit-box

[Verwandte Empfehlungen]

1.

Detaillierte Erläuterung des CSS-BOX-Typs und des Anzeigeattributs

2. Detaillierte Erläuterung des CSS3-Attributs display:box box model

3. Layout-Anzeige

Das obige ist der detaillierte Inhalt vonAllgemeine CSS-Anzeigeeigenschaften (Inline blockieren, keine) und Tutorials zur Verwendung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!