Lösung zur Definition der Mindestspannweite hat keine Auswirkung

Lösung zur Definition der Mindestspannweite hat keine Auswirkung
Das Span-Tag wird häufig beim Erstellen von HTML-Webseiten verwendet, aber manche Freunde wissen nicht, wie man dieses Tag richtig einsetzt. Sie denken, es sei einfach zu verwenden, aber die Verwendung ist mühsam, insbesondere wenn sie seine Breite und Höhe definieren müssen.

Ein Freund hat mich einmal gefragt: „Warum ändern sich Breite und Höhe der Spanne nach der Definition mit CSS immer noch nicht, als wären sie ungültig?“

Tatsächlich ist dieses Problem sehr einfach – zuerst müssen Sie die Eigenschaften von span verstehen, da span ein Inline-Element ist und Inline-Elemente Breite und Höhe ignorieren. Sobald Sie dies verstanden haben, ist die Lösung sehr einfach. Die Lösung besteht darin, CSS zu verwenden, um span in ein Box-Element umzuwandeln.

Es gibt zwei Möglichkeiten, ein Inline-Element als Box-Element zu definieren:

1. Verwenden Sie das Anzeigeattribut „display“ direkt, um es als Boxelement zu definieren.

Code kopieren
Der Code lautet wie folgt:

Anzeige:Block;

2. Verwenden Sie das Float-Attribut, um es automatisch als Box-Element zu definieren.

Code kopieren
Der Code lautet wie folgt:

schweben: links;

<<:  Detaillierte Verwendung des Docker-Maven-Plugins

>>:  Neue Blockbereichsfunktion von JavaScript ES

Artikel empfehlen

JavaScript-Kreisdiagrammbeispiel

ZeicheneffekteImplementierungscode JavaScript var...

So stellen Sie eine Nextcloud-Netzwerkfestplatte mit Docker bereit

NextCloud Sie können beliebige Dateien oder Ordne...

CSS implementiert fünf gängige 2D-Transformationen

2D-Transformationen in CSS ermöglichen es uns, ei...

Mit CSS3 erstellter Hover-Zoom-Effekt

Ergebnis:Implementierungscode: html <link href...

Beispielcode zur Implementierung der Menüberechtigungssteuerung in Vue

Wenn Benutzer an einem Backend-Verwaltungssystem ...

Verwenden Sie JS, um Dateien zu bearbeiten (FileReader liest --node's fs)

Inhaltsverzeichnis JS liest Datei FileReader doku...

So konfigurieren Sie mehrere Projekte mit demselben Domänennamen in Nginx

Es gibt zwei Möglichkeiten, mit Nginx mehrere Pro...

Einführung in die drei wesentlichen Protokolle für MySQL-Datenbankinterviews

Inhaltsverzeichnis 1. Redo-Log (Transaktionsproto...

MySQL Serie 14 MySQL Hochverfügbarkeitsimplementierung

1. MHA Durch die Überwachung des Masterknotens ka...

Detaillierte Erklärung der CocosCreator-Optimierung DrawCall

Inhaltsverzeichnis Vorwort Was ist DrawCall Welch...

Beispielcode zur Verwendung der Elementkalenderkomponente in Vue

Schauen Sie sich zunächst das Wirkungsdiagramm an...