Ein Beispiel für die Implementierung eines adaptiven Quadrats mit CSS
|
Die traditionelle Methode besteht darin, ein Quadrat in einer festen Form zu schreiben. Schreiben Sie direkt die Länge = Breite und schreiben Sie den festen Wert wie folgt
.Kasten{
Breite: 200px;
Höhe: 200px;
Hintergrund: rosa;
Farbe: #666;
}
Beim mobilen Design ändert sich jedoch in vielen Fällen die Bildbreite je nach Mobilgerät. Zu diesem Zeitpunkt ist ein adaptives Quadrat erforderlich. Hier sind zwei relativ einfache Implementierungsmethoden: Methode 1: CSS3-VW-Einheit, VW ist relativ zur Breite des Ansichtsfensters. Das Ansichtsfenster ist in VW-Einheiten mit je 100 Einheiten unterteilt. 1vw = 1 % Ansichtsfensterbreite
.Kasten{
Breite: 20 %; //Breite: 20vw ist auch in Ordnung Höhe: 20vw;
Hintergrund: rosa;
}Methode 2: Stellen Sie den Polsterungsstil der Box so ein, dass die Polsterung der Box mit der Breite der Box übereinstimmt, und stellen Sie die Höhe auf 0 Pixel ein.
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<Titel></Titel>
<link rel="stylesheet" href="">
</Kopf>
<Stil>
*{
Rand: 0;
Polsterung: 0;
}
.Kasten{
Breite: 20 %;
/* Setzen Sie die Höhe auf 0, um zu verhindern, dass die Box durch den Inhalt zu hoch gedehnt wird*/
Höhe: 0px;
/* Erweitern Sie die Höhe der Box.
Stellen Sie als Breite die gleiche feste Breite oder den gleichen Prozentsatz ein.
Der Prozentsatz ist relativ zur Breite des übergeordneten Elements.*/
Polsterung unten: 20 %;
Hintergrund: rosa;
Farbe: #666;
}
</Stil>
<Text>
<div Klasse="Box">
<p>Dies ist ein selbstanpassendes Quadrat</p>
</div>
</body>
</html>
Es ist zu beachten, dass, wenn hier nicht height: 0px steht, die Box um den Inhalt erweitert wird, wenn sich Inhalt in der Box befindet.
Was passiert, wenn „padding-bottom“ in „padding-top“ geändert wird?
Es ist ersichtlich, dass, wenn sich Inhalt im Quadrat befindet, der Inhalt außerhalb des Quadrats angezeigt wird. Dies liegt daran, dass der Standardtext von links nach rechts und von oben nach unten angeordnet ist, sodass der Text nach dem Auffüllen oben außerhalb des Quadrats liegt. Daher können Auffüllen unten und Auffüllen oben hier nicht gemischt werden. Darüber hinaus ist die Höhe der Box
*{
Rand: 0;
Polsterung: 0;
}
.Kasten{
Breite: 20 %;
/* Setzen Sie die Höhe auf 0, um zu verhindern, dass die Box durch den Inhalt zu hoch gedehnt wird*/
Höhe: 0px;
/* Erweitern Sie die Höhe der Box.
Stellen Sie als Breite die gleiche feste Breite oder den gleichen Prozentsatz ein.
Der Prozentsatz ist relativ zur Breite des übergeordneten Elementfelds*/
Polsterung unten: 20 %;
Hintergrund: rosa;
Farbe: #666;
Position: relativ;
Überlauf: versteckt;
}
P{
Position: absolut;
Breite: 100 %;
Höhe: 100%;
Hintergrund: gelb;
}
Auf diese Weise füllt der Inhalt der Schachtel das Quadrat aus. Damit ist dieser Artikel über die Implementierung eines adaptiven Quadrats mit CSS abgeschlossen. Weitere Informationen zu adaptiven CSS-Quadraten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: Zusammenfassung der Wissenspunkte des Nodejs-Clustermoduls und Anwendungsbeispiele
>>: Zusammenfassung der sieben MySQL JOIN-Typen
Artikel empfehlen
js-Lernnotizen: Schlüsselwörter „class“, „super“ und „extended“
Inhaltsverzeichnis Vorwort 1. Erstellen Sie Objek...
So fügen Sie Links zu FLASH in HTML ein und machen es mit allen gängigen Browsern kompatibel
Schauen Sie sich zuerst den Code an Code kopieren ...
So verstehen Sie den Unterschied zwischen ref toRef und toRefs in Vue3
Inhaltsverzeichnis 1. Grundlagen 1.Referenz 2. to...
So positionieren Sie die Kopfzeile mithilfe des CSS-Sticky-Layouts oben
Anwendungsszenarien: Eine der neuen Anforderungen...
Detaillierte Erklärung zum automatischen Hinzufügen eines Präfix-Plugins nach der CSS3-Verpackung: Autoprefixer
Das mit vue-cli erstellte Projektgerüst hat den A...
Über die richtige Art und Weise der Zeitumrechnung in JS beim Excel-Import
Inhaltsverzeichnis 1. Grundlagen 2. Problembeschr...
So verwenden Sie JS zum Parsen des Excel-Inhalts in der Zwischenablage
Inhaltsverzeichnis Vorwort 1. Ereignisse und Zwis...
Detaillierte Analyse des binlog_format-Modus und der Konfiguration in MySQL
Es gibt drei Hauptmethoden der MySQL-Replikation:...
Detaillierte Erklärung der jQuery-Kettenaufrufe
Inhaltsverzeichnis Kettenanrufe Ein kleiner Koffe...
So installieren Sie Android x86 in einer virtuellen VMware-Maschine
Manchmal möchten Sie eine App testen, aber nicht ...
Vorgang zur Zeitzonenanpassung im Docker-Container
Wie kann ich überprüfen, ob die Zeitzone des Dock...
Aktualisierungen für React Router V6
Inhaltsverzeichnis ReactRouterV6-Änderungen 1. &l...
Natives JS zum Erzielen von Verzeichnis-Scrolleffekten
Hier ist ein Text-Scrolling-Effekt, der mit nativ...
Beispiel zum Einrichten eines Linux-Systems zur automatischen Ausführung eines Skripts beim Start
Vorwort Hallo zusammen, ich bin Liang Xu. Bei der...
Detaillierte Erklärung und Beispiele zur Passwortverschlüsselung für Datenbankkonten
Detaillierte Erklärung und Beispiele zur Passwort...