1. Der Unterschied zwischen Inline-Elementen und Block-Level-Elementen
1. Inline-Elemente nehmen nicht die gesamte Zeile ein und sind angeordnet eine gerade Linie. Sie liegen alle auf derselben Linie und sind horizontal angeordnet.
Die Elemente auf Blockebene belegen eine Linie und sind vertikal angeordnet.
2. Elemente auf Blockebene können Inline-Elemente und Elemente auf Blockebene keine Elemente auf Blockebene enthalten.
3. Der Unterschied zwischen den Attributen von Inline-Elementen und Elementen auf Blockebene ist hauptsächlich auf die Attribute des Boxmodells zurückzuführen. Die Breiteneinstellung von Inline-Elementen ist ungültig ( Zeilenhöhe kann eingestellt werden) und der Rand nach oben und unten ist ungültig, das Auffüllen nach oben und unten ist ungültig.
2. Konvertierung von Inline-Elementen und Block-Level-Elementen
Konvertierung von Inline Elemente Für Blockelemente: display:block;
Blockelemente werden umgewandelt in Inline-Elemente: display:inline;
3
Problembeschreibung: Warum kann die Breite und Höhe von Inline-Elementen wie img und input festgelegt werden?
Ausführliche Antwort:
Elemente sind die Grundlage der Dokumentstruktur. In CSS generiert jedes Element eine Box (Box, auch übersetzt als „Box“), die den Inhalt des Elements enthält. Aber verschiedene Elemente werden unterschiedlich angezeigt:
und In der Dokumenttypdefinition (DTD) werden unterschiedliche Typen für verschiedene Elemente angegeben. Dies ist einer der Gründe, warum DTD für Dokumente wichtig ist.
1. Austauschbare und nicht austauschbare Elemente
Aufgrund der Eigenschaften des Elements selbst kann es in austauschbare und nicht austauschbare Elemente unterteilt werden.
a) Ersatzelement
Ersatzelement bedeutet, dass der Browser den spezifischen Anzeigeinhalt des Elements anhand seiner Tags und Attribute bestimmt.
Der Browser liest beispielsweise die Bildinformationen und zeigt sie basierend auf dem Wert des src-Attributs des -Tags an, aber wenn Sie den (X)-HTML-Code anzeigen, können Sie ihn nicht sehen tatsächlicher Inhalt des Bildes; ein weiteres Beispiel:
entscheidet anhand des Typattributs des , ob ein Eingabefeld, ein Optionsfeld usw. angezeigt wird.
Die Elemente , ,
Der Browser zeigt diese Elemente basierend auf ihrem Tag-Typ und ihren Attributen an. Austauschbare Elemente erzeugen in ihrer Anzeige ebenfalls Kästchen.
b) Nicht ersetzbare Elemente
Die meisten Elemente von (X)HTML sind nicht ersetzbare Elemente, das heißt, ihr Inhalt wird dem Benutzer (z. B. einem Browser) direkt angezeigt. Beispiel:
Absatzinhalt
Absatz
ist ein nicht ersetzbares Element und der Text „Absatzinhalt“ wird vollständig angezeigt.
2. Anzeigeelemente
Zusätzlich zu den Klassifizierungsmethoden für ersetzbare Elemente und nicht ersetzbare Elemente gibt es in CSS 2.1 weitere Klassifizierungsmethoden für Elemente: Elemente auf Blockebene (Block-Level). ) und Inline-Element (Inline-Ebene, auch übersetzt als „Inline“-Element).
a) Elemente auf Blockebene
Das offensichtlichste Merkmal eines Elements, das visuell als Block formatiert ist, besteht darin, dass es den Inhaltsbereich seines übergeordneten Elements standardmäßig horizontal ausfüllt Sowohl auf der linken als auch auf der rechten Seite befinden sich Elemente auf Blockebene standardmäßig in einer eigenen Zeile, wenn keine anderen Elemente vorhanden sind.
Typische Elemente auf Blockebene sind:
,
,
Elemente, die über CSS schweben (Float-Attribut, können nach links oder rechts schweben) und das Anzeigeattribut auf „Block“ oder „Listenelement“ setzen, sind Elemente auf Blockebene.
Schwebende Elemente sind jedoch etwas Besonderes. Aufgrund des Schwebens können sich daneben noch andere Elemente befinden. Und „list-item“ (list item
b) Inline-Elemente
Inline-Elemente bilden keinen neuen Inhaltsblock, das heißt, um sie herum können sich andere Elemente befinden, wie zum Beispiel , , < ;strong> usw. Sie sind alles typische Elemente auf Inline-Ebene.
Elemente, deren Anzeigeattribut gleich „inline“ ist, sind alle Inline-Elemente. Fast alle ersetzbaren Elemente sind Inline-Elemente, wie z. B. , usw.
Der Typ der Elemente ist jedoch nicht festgelegt. Durch Festlegen des Anzeigeattributs von CSS können Inline-Elemente in Elemente auf Blockebene umgewandelt werden, und Elemente auf Blockebene können auch in Inline-Elemente umgewandelt werden.
3. Fazit:
Ersatzelemente haben im Allgemeinen Eigenabmessungen, also Breite und Höhe, die eingestellt werden können. Wenn Sie beispielsweise die Breite und Höhe des Bildes nicht angeben, wird es entsprechend seiner inneren Größe angezeigt, die der Breite und Höhe des Bildes beim Speichern entspricht.
Für Formularelemente verfügen Browser auch über Standardstile, einschließlich Breite und Höhe.
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Unterschieds zwischen Inline-Elementen und Elementen auf Blockebene. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!