Zwei Möglichkeiten zur Implementierung von Square Div mit CSS
|
Ziel: Erstelle ein Quadrat, dessen Seitenlänge gleich ist Methode 1: Verwenden Sie die Einheit vw (P.S.: Ich denke, das ist die einfachste Methode). Die HTML-Struktur ist ebenfalls sehr einfach, mit nur einem div
<html>
<Text>
<div Klasse="Quadrat">
</div>
</body>
</html>
.Quadrat{
Breite: 50vw;
Höhe: 50vw;
Hintergrund: blau;
}Methode 2: Verwenden Sie padding-bottom Wichtige Punkte: 1. Höhe: 0, der Inhalt läuft in die Polsterung über, keine Sorge ~~ 2. Wenn der Padding-Bottom-Wert als Prozentsatz festgelegt wird, ist er relativ zur Breite des umgebenden Blocks. 3. Sie müssen den umschließenden Block festlegen HTML-Struktur:
<html>
<Text>
<div Klasse="Container">
<div Klasse="Quadrat">
</div>
</div>
</body>
</html>CSS:
*{
Rand: 0;
}
/* So einstellen, dass der sichtbare Bereich der Seite ausgefüllt wird*/
.Container{
Höhe: 100vh;
Breite: 100vw;
Hintergrund: blasses Goldrutenrot;
}
.Quadrat{
Breite: 50 %; /* relativ zur Breite des Containers */
padding-bottom: 50%; /* relativ zur Containerbreite */
Hintergrund: blassgrün;
} Das war's, zwei reichen. Sie können auch Margin verwenden, aber es besteht die Gefahr eines Zusammenbruchs, also reichen diese beiden ~~ Zusammenfassen Oben sind zwei Methoden, die ich Ihnen vorgestellt habe, um mit CSS quadratische Divs zu realisieren. Ich hoffe, sie werden Ihnen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten! |
<<: Anleitung zur Vermeidung von Docker Win Ping-Fehlern bei Containern
>>: Tipps zur Verwendung kleiner HTML-Tags
Artikel empfehlen
MySQL-Experiment: Verwenden von Explain zur Analyse des Indextrends
Überblick Die Indizierung ist eine Fähigkeit, die...
Was macht der legendäre VUE-Syntax-Sugar?
Inhaltsverzeichnis 1. Was ist syntaktischer Zucke...
Detaillierte Erklärung zu anonymen Slots und benannten Slots in Vue
Inhaltsverzeichnis 1. Anonyme Slots 2. Benannte S...
Zusammenfassung der neuen Verwendung von vi (vim) unter Linux
Ich benutze den vi-Editor seit mehreren Jahren, h...
CSS3 verwendet Transform-Origin, um Punktverteilung auf einem großen Kreis und Rotationseffekte zu erzielen
Zuerst müssen wir das Attribut „transform-origin“...
HTML+CSS+JavaScript realisiert die Anzeige des ausgewählten Effekts nach der Mausbewegung
1. Anzeigeeffekt: 2. HTML-Struktur <div Klasse...
14 Techniken für leistungsstarke Websites
Original : http://developer.yahoo.com/performance...
Verwendung des MySQL-Zeitstempels
Vorwort: Zeitstempelfelder werden häufig in MySQL...
Pull-Down-Aktualisierung und Pull-Up-Ladekomponenten basierend auf Vue-Kapselung
Basierend auf Vue und nativer JavaScript-Kapselun...
Das neueste grafische Tutorial zur Installation von MySQL 8.0.16 Winx64 unter Win10
Das Herunterladen dieser Datenbank nimmt viel Zei...
Vue implementiert einen einfachen Bildwechseleffekt
In diesem Artikelbeispiel wird der spezifische Co...
Vue verwendet Canvas, um Kreise zufälliger Größe und ohne Überlappung zu erzeugen
Inhaltsverzeichnis Canvas-bezogene Dokumente Effe...
HTML-Tipps, um Ihren Code semantisch zu gestalten
HTML-Semantik scheint ein alltägliches Problem zu...
Detaillierte Erklärung, wie Sie das automatische Beenden des Docker-Containers verhindern können
Dieser Artikel stellt kurz die Beziehung zwischen...
So ändern Sie den vorherigen Befehl, wenn in der MySQL-Eingabeaufforderung ein Eingabefehler auftritt
Inhaltsverzeichnis Aktuelle Themen Lösungsprozess...