Warum erben Anker-Tags keine Dimensionen von ihren übergeordneten Containern?

Anker-Tags: Warum sie keine Dimensionen von ihrem Container erben

Beim Rendern von Webseiten kann die Größe von Anker-Tags rätselhaft sein. Obwohl Anker-Tags in Elementen mit expliziter Höhe und Breite enthalten sind, erben sie diese Abmessungen oft nicht. Um dieses Verhalten zu verdeutlichen, tauchen wir in die CSS-Spezifikationen ein und erkunden die Mechanismen dahinter.

CSS-Spezifikationen

Gemäß der CSS 2.1-Spezifikation sind die Abmessungen des Inhaltsbereichs einer Box (Breite und Höhe). ) werden von verschiedenen Faktoren beeinflusst, einschließlich der Frage, ob das erzeugende Element über die Eigenschaft „Breite“ oder „Höhe“ verfügt, dem Vorhandensein von Text oder anderen Feldern innerhalb des Felds und tabellenspezifisch Überlegungen.

Anker-Tag-Anzeigeeigenschaft

Standardmäßig ist (Anker-)Tag besitzt einen Inline-Anzeigewert. Inline-Elemente nehmen zusammen mit ihrem Inhalt direkt am Layout der Seite teil. Diese Art des nicht ersetzten Elements wirkt sich darauf aus, wie seine Abmessungen bestimmt werden.

Höhenberechnung

Für nicht ersetzte Inline-Elemente wie Ankertags ist die Eigenschaft „Höhe“ nicht anwendbar. Stattdessen basiert die Höhe des Inhaltsbereichs auf der Schriftart, wie in der CSS-Spezifikation beschrieben. Im gegebenen Beispiel beträgt die Höhe des Ankertags 18 Pixel, abgeleitet von der einzelnen Textzeile im Bild. Weder der Bildinhalt noch die Höhe des Containers spielen eine Rolle.

Breitenberechnung

Die Eigenschaft „width“ gilt auch nicht für inline, nicht ersetzte Elemente. Die Breite wird durch den Inhalt, die Abstände, die Ränder und die Ränder des Anker-Tags bestimmt. Für das erste Ankertag wird die Breite wie folgt berechnet:

Width = content (114px) + left margin (20px) + left and right borders (10px) = 144px

Für das zweite Ankertag:

Width = content (280px) + left margin (20px) + left and right borders (10px) = 310px

Space Handling

Zusätzlich beeinflusst das Space Handling die Breitenberechnung. In Inline-Kontexten werden führende (ganz links) und nachfolgende (ganz rechts) Leerzeichen verworfen, während Zwischenräume zu einem einzigen Leerzeichen zusammengefasst werden. Dies wirkt sich auf die Breitenberechnung aus, indem möglicherweise Platz zur Breite des Ankertags hinzugefügt wird.

Das obige ist der detaillierte Inhalt vonWarum erben Anker-Tags keine Dimensionen von ihren übergeordneten Containern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!