Was bedeutet "oben: 0; links: 0; unten: 0; rechts: 0;" bedeuten?

Question

Ich lese eine Anleitung aus dieser site über eine Technik auf Zentrierelementen.

las ich den CSS-Code, lesen

.Absolute-Center { 
    margin: auto; 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0; 
} 

Und ich zu erklären.

Aber was ich nicht verstehe, ist der Teil, der erklärt "oben: 0; links: 0; unten: 0; rechts: 0;".

Es sagt,

Einstellung top: 0; links: 0; unten: 0; rechts: 0; gibt dem Browser eine neue Bounding Box für den Block. An diesem Punkt füllt der Block das gesamte verfügbare Leerzeichen in seinem versetzten Elternelement, das der Körper oder die Position ist: relativ; Container. Developer.mozilla.org: Bei absolut positionierten Elementen geben die Eigenschaften "Oben", "Rechts", "Unten" und "Links" Offsets von der Kante des umschließenden Blocks des Elements an (für das das Element relativ positioniert ist).

Was bedeutet das? Begrenzungsbox? Füllen Sie den gesamten verfügbaren Platz?

Wie funktioniert "top: 0; links: 0; unten: 0; rechts: 0;" Arbeit? Nimmt es die 4 Seiten einer Schachtel und dehnt sie, um den Behälter zu füllen? Funktionieren die Werte so?

Was passiert eigentlich, wenn ich "top: 0; links: 0; unten: 0; rechts: 0;" einstelle?

Ich bin bei dieser Erklärung völlig verloren und ich möchte, dass jemand es auf eine einfachere und verständlichere Weise umformuliert, neu formuliert und erklärt.

Vielen Dank.

Answer 1

Sie können 100% Breite und 100% Höhe mit top: 0; links: 0; unten: 0; rechts: 0;

Beispiel: Sie haben ein div gibt es keine feste Breite & Höhe für das Div. In diesem Fall können Sie diesen Stil anwenden und 100% Breite & Höhe machen.

div{ 
position: absolute; 
top: 0; 
right: 0; 
bottom: 0; 
left: 0; 
} 

JSFIDDLE DEMO

Answer 2

Position: absolute; oben: 0; links: 0; unten: 0; rechts: 0;

Im Wesentlichen was diese Eigenschaft tut ist es erweitert Ihr div oder jedes andere Element, das oben genannten Eigenschaft auf einen Vollbildmodus. Obwohl Ihre Webseite größer als ein Vollbildschirm ist, können Sie nach unten scrollen, um den Rest Ihrer Seite zu sehen, d. H. Das gestylte Element hängt immer noch von Ihrer unteren Seite ab. Position: fixiert; oben: 0; links: 0; unten: 0; rechts: 0; Feste Position auf der anderen Seite macht das gleiche, aber mit einem weiteren Vorteil von nicht scrollen. Dies bedeutet, dass Sie einen ganzen Bildschirm über Ihrer Seite haben können, der bei Bedarf ausgelöst werden kann und Ihr oberes div mit der obigen Eigenschaft unabhängig von der unteren Seite ist.

Answer 3

Was passiert, wenn Sie left verwenden und right (oder top und bottom) am gleichen Es ist verwirrend, weil die Spezifikation [6.3. Absolute positioning] uns sagt, dass:

Für absolut positionierte Elemente enthalten, deren Block Basierend auf einem Block-Level-Element ist diese Eigenschaft ein Offset von der Polsterung Kante dieses Elements.

Wie können Einstellung Position die Größe eines Elements beeinflussen? Der Grund rührt daher, wie die Breiten berechnet werden, die in einem anderen Abschnitt der Spezifikation, [8.1. The width of absolute or fixed positioned, non-replaced elements], vergraben sind.

Wenn Sie angeben, sowohl left und right und width Ihr Element ist nichtauto, dann, was Sie sagen wirklich keinen Sinn macht, und right wird ignoriert (alle Aussagen gelten gleichermaßen gut nach oben/unten/Höhe) :

Wenn keine der links/rechts/Breite auto ist ... die Werte werden über-constrained, ignorieren für linke den Wert (falls die Richtungseigenschaft des enthaltenden Block ist RNL) oder rechts (falls Richtung ist ltr) und lösen Sie diesen Wert Wert .

Aber wenn Ihr Element hat keine Breite Satz oder Breite ist (Standardeinstellung) auto, diese Regel Tritte in:

Wenn Breite Auto ist, links und rechts sind Auto nicht, dann für die Breite lösen.

schließlich angesichts der Gleichung, die die Werte für diese Elemente bestimmt ist:

'links' + 'margin-links' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'rechts' = Breite des Blocks enthält

Wir können deutlich sehen, dass nach dem in unseren Werten Aufstecken für left und right und die anderen, width ist die ungelöste (und unbeschränkte) Variable, die sich als width of containing box - left - right (mehr oder weniger) oder anders ausgedrückt: "füllen Sie den Abstand zwischen den Offsets".