Das Anzeigeattribut ist eines der wichtigsten Attribute in CSS. Es wird hauptsächlich zur Steuerung des Layouts von Elementen verwendet. Über das Anzeigeattribut können Sie festlegen, ob und wie das Element angezeigt wird.
1. Die Rolle des Anzeigeattributs
1. Das Anzeigeattribut kann den internen und externen Anzeigetyp des Elements festlegen.
(1) Externer Anzeigetyp:
a. Zu den externen Anzeigetypen von Elementen gehören Block, Inline usw.
b. Der externe Anzeigetyp bestimmt die Leistung des Elements im Fluid-Layout.
(2) Interner Anzeigetyp:
Zu den internen Anzeigetypen gehören Flex-Layout, Raster-Layout, Fluid-Layout usw.
Der interne Anzeigetyp eines Elements steuert, wie seine untergeordneten Elemente angeordnet sind.
2. Fließendes Layout (Dokumentenfluss oder regulärer Fluss):
„Dokumentfluss“ oder „Fluid Layout“ ist die Art und Weise, wie „Block“- und „Inline“-Elemente auf der Seite angezeigt werden, bevor Änderungen am Layout vorgenommen werden (standardmäßig).
Um es einfach und unkompliziert auszudrücken: Es handelt sich um eine Satzmethode, die festlegt, wie Elemente auf Blockebene und Inline-Elemente eingegeben und auf der Seite angezeigt werden.
(1) Im Flow-Layout - Elementlayoutmethode auf Blockebene:
Boxen auf Blockebene werden vertikal der Reihe nach angeordnet, beginnend am oberen Rand des enthaltenden Blocks.
Der vertikale Abstand zwischen Boxen derselben Ebene wird durch das Attribut „margin“ bestimmt.
Der vertikale Abstand zwischen zwei benachbarten Boxen auf Blockebene wird nach dem Randfaltprinzip reduziert.
(2) Im Fluid-Layout – Inline-Element-Layout-Methode:
Die Boxen werden horizontal angeordnet, beginnend am oberen Rand des enthaltenden Blocks.
Nur horizontale Ränder, Ränder und Innenabstände bleiben erhalten.
Die Felder können auf unterschiedliche Weise vertikal ausgerichtet werden: unten oder oben oder mit Ausrichtung nach unten
2. Typ der externen Anzeige des Elements
1. Splay gibt den Anzeigetyp des Elements durch die folgenden Attributwerte an
(1) Blockblockebene
(2) Inline-Block Inline-Block
(3) Inline
2. Elementanzeigetypen sind unterteilt in: Blockebene und Inline usw.
3. Inline-(Inline-)Elemente werden unterteilt in: Inline-Inline-Elemente und Inline-Block-Inline-Block-Elemente
(1) Diblock-Elemente auf Blockebene
1. Gemeinsame Elemente auf Blockebene sind:
<p>, <div>, <ul>, <ol>, <li>, <h1>~<h6>, <dl> usw.
2. Eigenschaften von Elementen auf Blockebene:
(1) Exklusive Linie
(2) Sie können die Breiten- und Höhenattribute festlegen.
(3) Wenn die Breite nicht festgelegt ist, entspricht die Breite standardmäßig der Breite des Inhaltsbereichs des übergeordneten Elements.
(4) Alle Arten von Elementen können in Elementen auf Blockebene platziert werden, andere Blockelemente können jedoch nicht in Textelement-Tags platziert werden.
(5) p- und div-Tags können nicht im p-Tag platziert werden.
(6) p- und div-Tags können nicht in h1-h6-Tags platziert werden.
(2) Inline-Block-Inline-Blockelemente
1. Die folgenden Elemente weisen die Eigenschaften von Inline-Blockelementen auf:
<img>, Formularelemente, <video>, <audio> usw. Diese Elemente werden im Wesentlichen als austauschbare Elemente bezeichnet (klassifiziert als Inline-Elemente).
2. Eigenschaften von Inline-Blockelementen:
(1) Benachbarte Inline-Block- (oder Inline-)Elemente werden in einer Zeile angezeigt. Wenn sie nicht platziert werden können, werden sie in eine andere Zeile umgebrochen.
(2) Zwischen benachbarten Inline-Blockelementen entstehen leere Lücken.
(3) Die Breiten- und Höhenattribute können festgelegt werden. Die Standardbreite eines Elements ist die Breite seines eigenen Inhalts.
(3) Inline-Inline-Elemente (Inline-Elemente).
1. Zu den gängigen Inline-Elementen gehören:
<a>, <strong>, <span>, <i>, <del> usw.
2. Eigenschaften von Inline-Elementen:
Benachbarte Inline-Elemente werden in einer Zeile angezeigt. Wenn sie nicht passen, werden sie in einer neuen Zeile angezeigt.
Das Festlegen der Eigenschaften „Breite“ und „Höhe“ ist ungültig. Seine Breite und Höhe erweitern sich entsprechend der Größe des Inhalts.
Innerhalb von Inline-Elementen können nur Text oder andere Inline-Elemente platziert werden.
3. Hinweis:
Das <a>-Tag kann nicht innerhalb des <a>-Tags platziert werden, Elemente auf Blockebene können jedoch innerhalb des <a>-Tags platziert werden.
In der tatsächlichen Entwicklung wird das <a>-Tag in einigen Fällen in ein Element auf Blockebene umgewandelt.
Vergleich von drei Elementtypen
3. Konvertierung zwischen Inline-Elementen und Elementen auf Blockebene
Wir müssen nur den entsprechenden Anzeigeattributwert zum entsprechenden Element hinzufügen, um das Element in den entsprechenden Elementtyp zu konvertieren.
(1) Verwenden Sie display: block;, um Elemente in Elemente auf Blockebene umzuwandeln.
Beispiel:
<!DOCTYPEhtml><html><head><style>a{display:block;width:150px;height:50px;background-color:#ACC;line-height:50px;text-align:center;text-decoration: keine;</style></head><body><ahref=>dotcpp-Programmierlink</a></body></html>Laufergebnisse:
(2) Verwenden Sie display: inline;, um Elemente in Inline-Elemente umzuwandeln. Es gibt jedoch nur wenige Anwendungen zum Konvertieren von Elementen in Inline-Elemente.
(3) Verwenden Sie display: inline-block;, um Elemente in Inline-Blockelemente umzuwandeln
4. Methode für versteckte Elemente
Auffüllen:
(1) Andere Anzeigewerte als keiner sind Anzeigeelemente.
(2) Sichtbarkeit:sichtbar; ist das Anzeigeelement
Beispiel:
Der Attributwert none von display kann zum Ausblenden von Elementen verwendet werden. Der Unterschied besteht darin, dass display: none beim Ausblenden des Elements auch die vom Element eingenommene Position verbirgt. display: none; wird normalerweise in Verbindung mit JavaScript verwendet, um ein Element auszublenden oder anzuzeigen. Hier ist ein Beispiel zur Veranschaulichung:
<!DOCTYPEhtml><html><head><style>div{width:350px;height:100px;background-color:#AAA;}</style></head><body><divid=box></div ><buttononclick=change_box(this)>Hide</button><script>functionchange_box(obj){varbox=document.getElementById('box');if(box.style.display=='none'){box.style .display=;obj.innerHTML=hide;}else{box.style.display=none;obj.innerHTML=show;}}</script></body></html>Laufergebnisse:
5. Der Unterschied zwischen den beiden Versteckmethoden
6. Entfernen Sie den standardmäßigen Leerraum von Inline-Blockelementen
Zwischen Inline-Blockelementen werden standardmäßig Lücken erstellt.
Gründe für Lücken:
(1) Wenn Elemente als Inline-Elemente formatiert sind, werden Leerzeichen (Leerzeichen, Wagenrückläufe, Zeilenvorschübe usw.) zwischen Elementen vom Browser verarbeitet.
(2) Gemäß der Verarbeitungsmethode von Leerzeichen (die Standardeinstellung ist normal, wodurch überschüssiges Leerzeichen zusammengeführt wird) werden der Wagenrücklauf und der Zeilenvorschub im ursprünglichen HTML-Code in ein Leerzeichen umgewandelt, sodass Lücken zwischen den Elementen entstehen.
(3) Der Abstand zwischen diesen Elementen ändert sich mit der Schriftgröße
Lösung:
(1) Fügen Sie das übergeordnete Element hinzu und schreiben Sie gleichzeitig die Schriftgröße des untergeordneten Elements neu
Das Attribut „font-size“ verfügt über eine Vererbung, sodass das übergeordnete Element „font-size:0“ an das untergeordnete Element „span“ vererbt wird und das untergeordnete Element die Schriftgröße zurücksetzen muss.
(2) Fügen Sie dem Element Float hinzu
Nach dem Hinzufügen von Float zu einem Element wird es vom Dokumentfluss getrennt. Wenn die Höhe des übergeordneten Elements nicht hinzugefügt wird, liegt ein Höhenkollapsproblem vor, und das durch Float verursachte Problem muss behoben werden.
(3) Fügen Sie in der Lücke zwischen den Bildern display:block;
Nach dem Hinzufügen von display:block wird das Bild zu einem Element auf Blockebene und belegt eine exklusive Zeile.