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 : 0px eingestellt; wenn das Element untergeordnete Elemente enthält, kann die Höhe nicht normal eingestellt werden. Wir müssen also position: absolute;使當前內容脫離文檔流,那么內容的高度百分比參照的就是父級的寬度

*{
	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

Lösung für viele Zeilenumbrüche und Wagenrückläufe in MySQL-Daten

Ein Beispiel für die Implementierung eines adaptiven Quadrats mit CSS

Lösung für viele Zeilenumbrüche und Wagenrückläufe in MySQL-Daten

Zusammenfassung der Überlegungen zum Schreiben von Web-Frontend-Code

Implementierung eines Random Roll Callers basierend auf JavaScript

Was bedeutet das n nach int(n) in MySQL?

Mit JS einen rotierenden Weihnachtsbaum in HTML implementieren

Vue implementiert die Shake-Funktion (kompatibel mit ios13.3 und höher)

Detaillierte Erklärung des Vue-Lebenszyklus

vue-element-admin global laden warten

Detaillierte Erklärung zum Upgrade von Softwarepaketversionen unter Linux

Detailliertes Tutorial zur Installation der MySQL v5.7.18-Dekomprimierungsversion

Artikel empfehlen

So lösen Sie das Problem „Nginx 503-Dienst vorübergehend nicht verfügbar“

Detaillierte Erklärung der Kodierungsprobleme bei MySQL-Befehlszeilenoperationen

So füllen Sie Elemente in Spalten im CSS-Rasterlayout

Docker-Benutzerdefinierte Brücke Docker0 und Befehlsvorgänge zum Öffnen, Schließen und Neustarten von Docker

Implementierung der Vue-Anmeldefunktion

Detaillierte Erklärung des MySQL-Überwachungstools mysql-monitor

Implementierung eines Puzzlespiels mit js

Ausführliche Erläuterung der HTML-Grundlagen (Teil 1)

Acht Implementierungslösungen für domänenübergreifendes JS-Frontend

CSS erstellt Tippboxen, Bubble-Boxen und Dreiecke

CSS3 realisiert Partikelanimationseffekte beim Matching von Königen

So verwenden Sie nginx, um auf lokale statische Ressourcen auf einem Linux-Server zuzugreifen

Installations-Tutorial für VMware Workstation 12 Pro Linux

Mybatis-Implementierungsmethode für Fuzzy-Abfragen

Ein-Klick-Installation von MySQL 5.7 und Methode zur Änderung der Kennwortrichtlinie