CSS - Inset: Ihr ultimativer Leitfaden zur Positionierung von Elementen

Hallo da draußen, zukünftige CSS-Meister! Heute tauchen wir ein in die wunderbare Welt der inset-Eigenschaft. Als Ihr freundlicher Nachbarschafts-Computerlehrer bin ich aufgeregt, Sie auf dieser Reise zu führen. Glauben Sie mir, am Ende dieses Tutorials werden Sie wie ein Profi einsetzen!

Was ist die CSS Inset-Eigenschaft?

Bevor wir ins tiefe Wasser springen, lassen Sie uns mit den Grundlagen beginnen. Die inset-Eigenschaft ist wie ein Schweizer Army-Messer für die Positionierung von Elementen in CSS. Es ist eine Abkürzungseigenschaft, die gleichzeitig alle vier Seiten der Position eines Elements festlegt. Stellen Sie sich vor, es ist ein magischer Stock, der Ihr Element genau dort platzieren kann, wo Sie es auf der Seite haben möchten.

Mögliche Werte und Syntax

Lassen Sie uns die möglichen Werte und die Syntax der inset-Eigenschaft durchbrechen. Machen Sie sich keine Sorgen, wenn es zunächst etwas einschüchternd aussieht - wir werden jeden Schritt einzeln durchgehen!

Wert	Beschreibung
auto	Der Browser berechnet den Einzug
Länge	Gibt den Einzug in px, pt, cm, etc. an
%	Gibt den Einzug in % des umgebenden Elements an
inherit	Erbt den Wert vom übergeordneten Element
initial	Setzt die Eigenschaft auf ihren Standardwert
unset	Setzt die Eigenschaft auf ihren natürlichen Wert zurück

Die grundlegende Syntax für die inset-Eigenschaft sieht so aus:

auswahl {
inset: wert;
}

Nun lassen Sie uns verschiedene Möglichkeiten erkunden, diese mächtige Eigenschaft zu verwenden!

CSS Inset - Vier Längenwerte

Wenn Sie vier Werte zur inset-Eigenschaft angeben, setzen Sie die oberen, rechten, unteren und linken Positionen gleichzeitig. Es ist, als ob Sie Ihrem Element von allen Seiten eine dicke Umarmung geben!

.box {
position: absolute;
inset: 10px 20px 30px 40px;
}

In diesem Beispiel sagen wir unserem .box-Element, dass es 10px vom oberen, 20px vom rechten, 30px vom unteren und 40px vom linken Rand seines umgebenden Elements entfernt sitzen soll. Es ist, als ob Sie Ihrem Element sehr spezifische Anweisungen geben, wo es stehen soll!

CSS Inset - Drei Längenwerte

Was passiert, wenn wir nur drei Werte verwenden? CSS wird klug! Es geht davon aus, dass der linke Wert derselbe wie der rechte sein sollte.

.box {
position: absolute;
inset: 10px 20px 30px;
}

Dies entspricht inset: 10px 20px 30px 20px. Unsere Box ist jetzt 10px vom oberen, 20px von beiden Seiten und 30px vom unteren Rand entfernt. Es ist, als ob Sie Ihrem Element sagen, es soll an den Seiten ein bisschen näher zusammenrücken!

CSS Inset - Zwei Längenwerte

Mit zwei Werten wird CSS noch schlauer. Der erste Wert applies an die Ober- und Unterseite, während der zweite an die Linker und Rechter applies.

.box {
position: absolute;
inset: 10px 20px;
}

Dies ist das gleiche wie inset: 10px 20px 10px 20px. Unsere Box ist jetzt 10px von oben und unten und 20px von links und rechts entfernt. Es ist, als ob Sie Ihrem Element einen symmetrischen Rahmen geben!

CSS Inset - Ein Längenwert

Wenn Sie nur einen Wert verwenden, applies er an alle vier Seiten. Es ist, als ob Sie Ihr Element in ein uniformes的空间 blanket einwickeln!

.box {
position: absolute;
inset: 10px;
}

Dies entspricht inset: 10px 10px 10px 10px. Unsere Box hat jetzt einen 10px-Abstand auf allen Seiten von ihrem umgebenden Element.

CSS Inset - Prozentsatz-Wert

Prozentsätze sind super nützlich, wenn Sie ein responsive Layout möchten. Der Prozentsatz wird basierend auf den Abmessungen des umgebenden Elements berechnet.

.box {
position: absolute;
inset: 10%;
}

In diesem Fall wird unsere Box 10% von allen Seiten ihres Behälters entfernt positioniert. Wenn der Behälter wächst oder schrumpft, wird die Positionierung entsprechend angepasst. Es ist, als ob Sie Ihrem Element eine prozentsatzbasierte persönliche Raumblase geben!

CSS Inset - Gemischte Werte

Derspaß beginnt, wenn wir verschiedene Einheiten mischen. Sie können eine Kombination aus Prozentsätzen, Pixeln und sogar dem auto-Schlüsselwort verwenden.

.box {
position: absolute;
inset: 10% 20px auto 5em;
}

Hier ist unsere Box 10% vom oberen, 20px vom rechten, automatisch vom unteren (was normalerweise bedeutet, dass es den verbleibenden Raum einnimmt) und 5em vom linken Rand entfernt. Es ist, als ob Sie Ihrem Element eine einzigartige Positionsprägung geben!

CSS Inset - Auto-Wert

Der auto-Wert ist besonders nützlich, wenn Sie möchten, dass der Browser den Einzug automatisch berechnet.

.box {
position: absolute;
inset: auto 20px 10px;
}

In diesem Beispiel wird die Oberseite automatisch berechnet, während die Rechte und Linke auf 20px und die Untere auf 10px gesetzt sind. Es ist, als ob Sie Ihrem Element sagen: "Figure out the top yourself, but stick to these rules for the other sides".

CSS Inset - Verwandte Eigenschaften

Obwohl inset äußerst nützlich ist, ist es gut zu wissen, dass seine einzelnen Komponenten auch wichtig sind. Diese sind top, right, bottom und left. Sie können diese verwenden, wenn Sie eine feinere Kontrolle benötigen.

.box {
position: absolute;
top: 10px;
right: 20px;
bottom: 30px;
left: 40px;
}

Dies erreicht das gleiche Ergebnis wie inset: 10px 20px 30px 40px, aber ermöglicht es Ihnen, jede Seite einzeln anzupassen, wenn nötig.

Schlussfolgerung

Und da haben Sie es, Leute! Sie haben gerade eine große Reise durch die CSS inset-Eigenschaft unternommen. Von ihrer grundlegenden Syntax bis zu ihren verschiedenen Anwendungsfällen haben Sie nun die Macht, Elemente mit Präzision und Flexibilität zu positionieren.

Erinnern Sie sich daran, der Schlüssel zum Beherrschen von CSS ist die Übung. Also experimentieren Sie mit diesen Beispielen, mischen und kombinieren Sie Werte und sehen Sie, wie inset Ihre Layouts verwandeln kann. Bevor Sie es wissen, werden Sie Elemente im Schlaf einsetzen!

Frohes Coden und möge Ihre Elemente immer perfekt positioniert sein!

Credits: Image by storyset