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
Details zum MySQL-Datentyp
Inhaltsverzeichnis 1. Numerischer Typ 1.1 Klassif...
Eine kurze Einführung in React
Inhaltsverzeichnis 1. CDN-Einführung 1.1 reagiere...
Einige Probleme, die bei der Installation von MySQL auftreten können
Frage 1: Wenn Sie während der Installation „net s...
Detaillierte Erklärung der perfekten Lösung für das VMware-Problem mit dem schwarzen Bildschirm nach dem Upgrade auf MacOS Catalina
Perfekte Lösung für den schwarzen VMware-Bildschi...
Zusammenfassung der MySQL-Indexkenntnisse
Die Einrichtung eines MySQL-Index ist für den eff...
Detaillierte Erklärung zur grundlegenden Verwendung des React Native-Scaffoldings
Erstellen des Projekts Führen Sie die Befehlszeil...
So implementieren Sie Element-Floating und Clear-Floating mit CSS
Grundlegende Einführung in das Floating Im Standa...
Linux wird geladen, vmlinux wird debuggt
Laden von Kernelsymbolen mit gdb arm-eabi-gdb out...
Interpretation und Verwendung verschiedener React-State-Manager
Zunächst müssen wir wissen, was ein Zustandsmanag...
Detaillierte Erklärung der Docker-Nutzung unter CentOS8
1. Installation von Docker unter CentOS8 curl htt...
Richtige Schritte zur Installation von Nginx unter Linux
Vorwort Wenn Sie wie ich ein fleißiger Java-Backe...
Beispielcode zur Implementierung eines zufälligen Roll Callers in HTML
Nachdem dieses Namensaufrufgerät mit dem Aufruf d...
Detaillierte Interpretation der Datei /etc/fstab im Linux-System
Vorwort [root@localhost ~]# cat /etc/fstab # # /e...
Analyse und Praxis des serverseitigen Rendering-Prinzips von React
Die meisten Leute haben schon einmal vom Konzept ...
So verwalten Sie Docker über die Benutzeroberfläche
Docker wird in immer mehr Szenarien verwendet. Fü...