Detailliertes Tutorial zum Konvertieren zwischen Inline- und Block-Level-Elementen-HTML-Tutorial-php.cn

Am 5. Januar 2015 ging ich zu einem Vorstellungsgespräch zu einem Internet-Start-up-Unternehmen. In der Rekrutierungskolumne stand, dass sie Leute mit mehrjähriger Erfahrung suchten Ich habe mich auf meine geringen Fähigkeiten verlassen, ohne meine Fähigkeiten zu überschätzen. Infolgedessen stellte mir der Interviewer viele Fragen, mit denen ich konfrontiert worden war. Leider hatte ich nur ein allgemeines Verständnis dieser Wissenspunkte, wusste aber sehr wenig über die tatsächliche Anwendung dieser Wissenspunkte. Während des Vorstellungsgesprächs war es mir peinlich, weil ich immer das Gefühl hatte, die Zeit anderer zu verschwenden.

Diese Frage stellte mir der Interviewer nach dem Box Modell, da ich über den oberen, unteren, linken und rechten Rand sprechen muss Um es besser zu erklären, habe ich ein Beispiel für Inline-Elemente und Elemente auf Blockebene gegeben, aber die Leute fragen immer noch: „Welche Methoden können zum Konvertieren von Inline-Elementen und Elementen auf Blockebene verwendet werden?“ Ich habe nur auf <a href="http://www.php.cn/wiki/927.html" target="_blank">display<code><a href="http://www.php.cn/wiki/927.html" target="_blank">display</a> geantwortet, also habe ich nach relevanten Büchern gesucht und gesucht Ich habe mir den Quellcode mehrerer Websites angesehen und ihn dann zusammengefasst.

Elemente auf Blockebene und Inline-Elemente

Elemente auf Blockebene werden auf die gleiche Breite wie das Element erweitert .
Inline-Elemente „verpacken“ ihren Inhalt so eng wie möglich.
(Die beiden oben genannten Zusammenfassungen stammen aus dem Buch „CSS Design Guide“)

Der Standard-CSS-Stil

Die Höhe eines Elements auf Blockebene entspricht der Höhe seines Inhalts, und seine Breite wird auf die gleiche Breite wie das übergeordnete Element erweitert. Infolgedessen belegt das Element auf Blockebene eine eigene Zeile und kann keine anderen Elemente auf Blockebene und Inline-Elemente dahinter aufnehmen.
Die Höhe eines Inline-Elements entspricht der Höhe seines Inhalts, und seine Breite verkleinert seinen Inhalt. Ein seltsamer Punkt: Es gibt einen bestimmten Abstand zwischen Inline-Elementen. Bei der Anzeige über die Konsole wird dieser Abstand nicht als Boxmodell gezählt. Ich verwende <a href="http://www.php.cn/wiki/931.html" target="_blank">margin<code><a href="http://www.php.cn/wiki/931.html" target="_blank">margin</a>:0;padding:0:0;padding:0 und das wird nicht der Fall sein klar Diese Entfernung? ? Bitte lassen Sie es mich wissen!

CSS-Änderung

Ersatzelement: Ersetzungselement bedeutet, dass der Browser auf dem Tag des Elements und basiert Attribut um den spezifischen Anzeigeinhalt des Elements zu bestimmen. Beispielsweise liest der Browser die Informationen zu <img>Bild und zeigt sie basierend auf dem Wert des Attributs src an. Wenn Sie jedoch den (X)-HTML-Code anzeigen, können Sie die Informationen nicht sehen tatsächlicher Inhalt des Bildes; ein weiteres Beispiel ist durch <input>Das Typattribut bestimmt, ob das Eingabefeld angezeigt werden soll, oder Radio-Button usw. Von hier zitiert
Nicht ersetzbare Elemente: wie p a span p, d. h. ihr Inhalt wird dem Benutzer direkt angezeigt (wie z Browser).
Daher werden Inline-Elemente in Inline-Ersatzelemente img input und Inline-Nicht-Ersatzelemente span a unterteilt ... Es gibt einen Unterschied in der CSS-Änderung zwischen den beiden.
Inline nicht ersetzte Elemente: Ihre Breiten- und Höheneinstellungen sind ungültig. Sie können die inneren und äußeren Ränder und Ränder festlegen, aber die vertikalen Einstellungen haben keinen Einfluss auf das Dokumentflusslayout Legen Sie die vertikalen Innen- und Außenränder fest. Vertikale Ränder sind für uns sichtbar, belegen jedoch nicht den Dokumentfluss. Daher legt das obige Inline-Element einen Rahmen mit einer Breite von 10 Pixel fest, der nicht dazu führt, dass sich das untere Element nach unten bewegt.
Inline-Ersetzungselemente verfügen nicht nur über die Eigenschaften nebeneinander angeordneter Inline-Elemente, sondern können auch die inneren und äußeren Ränder sowie die Breite und Höhe festlegen, die sich auf das Layout des Dokumentflusses auswirken. Und das Festlegen der Höhe entspricht dem Festlegen der Zeilenhöhe, die vertikal zentriert wird
line-height Obwohl Inline-Nicht-Ersatzelemente keine Breite haben und Höhe, sie können mit line-height verwendet werden. Stellen Sie die Höhe ein. Das Seltsame ist jedoch, dass die Zeilenhöhe zwar das Dokumentflusslayout der Inline-Elemente beeinflussen kann, der Rand jedoch den Inhalt umschließt und das obere und untere Weiß ignoriert Platz, der durch die Zeilenhöhe entsteht.
margin Der Rand der Inline-Elemente, die nicht zusammengeführt werden (Ersetzung, Nicht-Ersetzung). Im Gegensatz zu Elementen auf Blockebene werden der obere und untere sowie der linke und rechte Rand kombiniert.
Elemente auf Blockebene können ihre Höhe und Breite sowie ihre Ränder, Innen- und Außenränder festlegen und ihre Einstellungen wirken sich auf das Layout des Dokumentflusses aus.
Beachten Sie, dass das Ändern der Breite nicht dazu führt, dass die darunter liegenden Inline-Elemente nach oben verschoben werden.
Inline-Elemente Kann die Höhe von Inline-Elementen eingestellt werden? Natürlich nicht! Diese Antwort ist natürlich zu absolut.
Elemente werden in ersetzte Elemente und nicht ersetzte Elemente unterteilt. Fast alle ersetzten Elemente sind Inline-Elemente.

Konvertierung zwischen Inline-Elementen und Elementen auf Blockebene

display:none; Das Element wird weder angezeigt, noch wird die ursprünglich vom Element eingenommene Dokumentflussposition beibehalten.
display:block;In Elemente auf Blockebene konvertieren.
display:inline; In Inline-Element konvertieren.
display:inline-block;In Inline-Block-Level-Element konvertieren.
Die oben genannten vier verwende ich häufig.

Mit display:block und display:inline; können Sie problemlos zwischen den beiden Elementtypen konvertieren Realisierungsformen.
Es gibt jedoch viele Fälle, in denen wir display:inline-block; verwenden müssen, um Inline-Elemente oder Elemente auf Blockebene zu konvertieren. Dieses Element ist jedoch ein neues -Attribut von CSS2. Dieses Attribut wird für Versionen unter IE7 nicht unterstützt, daher sind einige kompatible Methoden erforderlich. Ich werde bald einen Artikel schreiben
display
Elemente auf Blockebene werden standardmäßig angezeigt:block; Inline-Nicht-Ersatz-Elemente (a, span) werden standardmäßig angezeigt :inline; ;Der Standardwert für Inline-Ersetzungselemente (Eingabe) ist display:inline-block;
<a href="http://www.php.cn/%20wiki/919.html%20" target="_blank">float<code><a href="http://www.php.cn/wiki/919.html" target="_blank">float</a>
Nach dem Festlegen von float:left/right auf einem Inline-Element das Anzeigeattribut des Inline-Elements wird ihm ein Blockwert zugewiesen und verfügt über die Eigenschaft float. Inline-Elemente entfernen den unerklärlichen Leerraum zwischen ihnen,
<a href="http://www.php.cn/wiki/902.html" target="_blank ">position<code><a href="http://www.php.cn/wiki/902.html" target="_blank">position</a>
Beim Positionieren von Inline-Elementen position:absolute und position:fixed. Macht die ursprünglichen Inline-Elemente zu Elementen auf Blockebene.

[Hinweis] Mit den obigen Einstellungen können Sie die Breite, Höhe sowie die inneren und äußeren Ränder für nicht ersetzte Inline-Elemente festlegen. Beim Ersetzen müssen Sie jedoch darauf achten, dass die Konvertierung in Elemente auf Blockebene nur ein Nebeneffekt von Float und Position ist. Ihre eigenen Effekte beeinträchtigen auch den Layouteffekt.
Als wir zuvor Elemente auf Blockebene eingeführt haben, sagten wir, dass die Breite von Elementen auf Blockebene das übergeordnete Element erben wird. Dieser Effekt tritt jedoch nur auf, wenn display:block; für Inline-Elemente festgelegt ist. Andere Konvertierungen führen standardmäßig nicht zu diesem Effekt.

Es wird empfohlen, dass Freunde selbst im Editor tippen und vergleichen, um einen tiefen Eindruck zu hinterlassen.

[Verwandte Empfehlungen]

1 Kostenloses HTML-Online-Video-Tutorial

2 Entwicklungshandbuch

php.cn Original-HTML5-Video-Tutorial

Das obige ist der detaillierte Inhalt vonDetailliertes Tutorial zum Konvertieren zwischen Inline- und Block-Level-Elementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!