Analyse des CSS-Kantenversatzabstands im Vergleich zu linken und rechten Wahrscheinlichkeitswerten

Dieser Artikel stellt hauptsächlich die Analyse der möglichen Werte für den Kantenversatz von CSS vor. Jetzt kann ich ihn mit Ihnen teilen.

Der Kantenversatzabstand von CSS spielt eine gewisse Rolle im Layout. Nachfolgend finden Sie eine kurze Einführung in alle möglichen Werte von links und rechts. Wenn Sie interessiert sind, können Sie sich diesen Artikel ansehen hilfreich für Sie, um CSS zu lernen

1). beide „auto“ (ihre Anfangswerte), der berechnete Wert ( berechneter Wert ) ist 0 (d. h. die Box bleibt an ihrer ursprünglichen Position). 2) Der Einstellungswert von „links“ oder „rechts“ ist „auto“
Wenn links „auto“ ist, ist der berechnete Wert der negative Wert von rechts (z. B. basiert der Boxbereich auf dem rechten Wert). nach links verschoben). Wenn rechts als „auto“ angegeben ist, ist der berechnete Wert das Negativ des linken Werts.
Beispielcode:

<p style="width:20px; height:20px; background-color:red; position:relative; left:100px;"></p>

Im obigen Code ist das p-Element ein relativ positioniertes Element, sein „linker“ Wert ist „100px“ und „rechts“ ist nicht festgelegt und der Standardwert ist „ auto“, dann sollte der berechnete Wert der Eigenschaft „right“ -left sein, also „right:-100px“.

3) Weder die Einstellungswerte „Links“ noch „Rechts“ sind „Auto“

Wenn weder „Links“ noch „Rechts“ „Auto“ ist, erscheint die Positionierung weit entfernt -abgeholt, von denen einer aufgegeben werden musste. Wenn das Attribut „Richtung“ des enthaltenden Blocks „ltr“ ist, gewinnt „links“ und der Wert „rechts“ wird zu -links. Wenn das Attribut „direction“ des enthaltenden Blocks „rtl“ ist, gewinnt „right“ und der Wert „left“ wird ignoriert.
Beispielcode:

<p style="width:100px; height:100px; overflow:auto; border:1px solid blue;"> 
<p style="width:20px; height:20px; background-color:red; position:relative; left:60px; right:60px;"></p> 
</p>

Abschließend sollte „links“ stärker sein.

'top'- und 'bottom'-Attributwerte
Die 'top'- und 'bottom'-Attribute verschieben ein relativ positioniertes Element nach oben oder unten, ohne seine Größe zu ändern. „oben“ verschiebt die Box nach unten und „unten“ verschiebt sie nach oben. Da „top“ und „bottom“ nicht dazu führen, dass die Box geteilt oder gedehnt wird, ist der berechnete Wert immer top=-bottom. Wenn beide „auto“ sind, ist der berechnete Wert 0. Wenn einer von ihnen auto ist, ist der berechnete Wert immer „auto“. Das ist der negative Wert des anderen. Wenn keiner von beiden den Wert „auto“ hat, wird „bottom“ ignoriert und der berechnete Wert von „bottom“ ist das Negativ des „top“-Werts.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Über die Methode der responsiven zentrierten Anzeige von CSS-Bannerbildern

So verwenden Sie negative Randwerte ​​in CSS, um die Mittelposition anzupassen

Das obige ist der detaillierte Inhalt vonAnalyse des CSS-Kantenversatzabstands im Vergleich zu linken und rechten Wahrscheinlichkeitswerten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!