Die Raten in CSS sind die Maßeinheiten, die die Größe und Proportionen von Elementen auf einer Webseite bestimmen. Sie ermöglichen es Ihnen, flexible und adaptive Layouts zu erstellen, die leicht auf verschiedene Geräte und Bildschirme skaliert werden können.
Arten von Reittieren
Es gibt verschiedene Arten von Raten in CSS, von denen die am häufigsten verwendeten Prozentsätze (%), relative Einheiten (em und rem) und absolute Einheiten (px) sind.
- Prozent dies sind relative Einheiten, die relativ zum übergeordneten Element berechnet werden. Wenn beispielsweise die Breite des übergeordneten Elements 500 Pixel beträgt, wird das Festlegen der Breite für das Element zwischen 0% und 100% dazu führen, dass das Element den entsprechenden Prozentsatz der Breite des übergeordneten Elements einnimmt.
- EM- und Rem-Einheiten dies sind die relativen Einheiten, die die Schriftgröße des Elements zur Berechnung verwenden. Der Wert 1em entspricht der Schriftgröße des HTML-Stammelements. Der rem-Wert ist auch gleich der Schriftgröße des Stammelements, aber sein Wert bleibt unverändert, selbst wenn sich die Schriftgröße des übergeordneten Elements ändert.
- Bildschirmpixel - Dies sind absolute Einheiten, die durch eine bestimmte Anzahl von Pixeln angegeben werden. Pixel sind der genaueste Weg, um die Größe eines Elements festzulegen, aber sie werden nicht automatisch skaliert, wenn Sie die Größe des Bildschirms oder Geräts ändern.
Verwenden von Reittieren
Sie können die Breite des Elements mit der width-Eigenschaft definieren, um die Breite des Elements festzulegen, sowie die height- , font-size- und andere Eigenschaften, um die Einrückung und die Größe festzulegen.
Beispiele für die Verwendung von Reittieren:
- Legt die Breite eines Elements in Prozent fest: width: 50%;
- Legt die Höhe eines Elements in em fest: height: 3em;
- Festlegen der Schriftgröße in rem: font-size: 1.2rem;
- Legt den linken Einzug in Pixeln fest: margin-left: 20px;
Durch die Kombination verschiedener Raise-Typen können Sie flexible und adaptive Layouts erstellen, die sich leicht an verschiedene Anzeigebedingungen anpassen können.
Schlußfolgerung
Raits bieten leistungsstarke Optionen zum Anpassen der Größe und des Seitenverhältnisses von Elementen in CSS. Durch die Verwendung verschiedener Raise-Typen können Sie flexible und adaptive Layouts erstellen, die auf verschiedenen Geräten und Bildschirmen gut funktionieren.
So legen Sie Reads für CSS fest: Eine vollständige Anleitung
Sie können mehrere verschiedene CSS-Eigenschaften verwenden, um die Reads für CSS festzulegen. Die gebräuchlichste und einfachste Methode besteht jedoch darin, die Eigenschaft "display" mit dem Wert "flex" oder "grid" zu verwenden. Jede dieser Methoden hat ihre eigenen Besonderheiten, und je nach Ihren Bedürfnissen können Sie die für Sie geeignete Methode auswählen.
Die Eigenschaft "display: flex" erstellt ein flexibles Layout, mit dem Elemente in einer Zeile oder Spalte platziert werden können. Mit der Eigenschaft "flex-grow" können Sie Rays zwischen Elementen festlegen. Der Wert dieser Eigenschaft gibt an, welchen Teil des freien Speicherplatzes ein Element im Verhältnis zu anderen Elementen einnehmen soll. Wenn beispielsweise ein Flex-grow: 1-Element und ein anderes Flex-grow-Element vorhanden sind: 2", dann wird das zweite Element doppelt so viel Platz einnehmen.
Die Eigenschaft "display: grid" erstellt ein Raster, das aus Zellen besteht, die an verschiedenen Positionen positioniert werden können. Sie können die Eigenschaft "grid-template-rows" oder "grid-template-columns" verwenden, um die Rastern im Raster festzulegen. Diese Eigenschaften akzeptieren eine durch Leerzeichen getrennte Liste von Werten, die angeben, wie viel Platz jede Zelle in einer Zeile oder Spalte einnehmen soll. Zum Beispiel bedeutet "grid-template-rows: 1fr 2fr", dass die erste Zelle in der Zeile 1/3 des Platzes (33%) und die zweite Zelle 2/3 des Platzes (66%) einnehmen muss.
Das Einrichten von Reads für CSS kann vor allem für Anfänger eine entmutigende Aufgabe sein. Wenn Sie jedoch die Eigenschaften "flex" oder "grid" richtig verwenden, können Sie ein flexibles und anpassungsfähiges Design für Ihre Webseite erstellen. Verwenden Sie diesen Leitfaden als Grundlage für attraktive und effektive Layouts.
