Was ist die relative Positionierungsmethode von Bildern?

Die relative Positionierungsmethode von Bildern besteht darin, das Positionsattribut von CSS, die oberen, rechten, unteren und linken Attribute von CSS, das Transformationsattribut von CSS und das Flex-Layout von CSS zu verwenden. Detaillierte Einführung: 1. Verwenden Sie das Positionsattribut von CSS, einschließlich vier Werten: statische Positionierung, relative Positionierung, absolute Positionierung und feste Positionierung. 2. Verwenden Sie die oberen, rechten, unteren und linken Attribute von CSS usw.

Das Betriebssystem dieses Tutorials: Windows 10-System, DELL G3-Computer.

Relative Bildpositionierung ist eine Bildlayoutmethode, die häufig im Webdesign verwendet wird. Sie ermöglicht die relative Positionierung von Bildern entsprechend der Größe und Position von Seitenelementen und ermöglicht so eine nahtlose Integration zwischen Bildern und Seitenelementen. Insbesondere kann die Methode zur relativen Bildpositionierung gemäß den folgenden Aspekten implementiert werden:

1. Verwenden Sie das Positionsattribut von CSS.

Das Positionsattribut von CSS wird verwendet, um die Position des Elements auf der Seite zu definieren, einschließlich statischer Elemente (statische Positionierung), relativ (relative Positionierung), absolut (absolute Positionierung) und Feste (feste Positionierung) vier Werte. Unter diesen ist die relative Positionierung (relativ) der am häufigsten verwendete Wert bei der Methode der relativen Bildpositionierung.

1. Statische Positionierung (statisch): Die statische Positionierung ist die Standardpositionierungsmethode für Elemente und die Elemente werden gemäß dem normalen Dokumentfluss angeordnet. Bei dieser Positionierungsmethode wird das Element nicht von oben, rechts und unten beeinflusst und der Einfluss von Attributen wie links.

2. Relative Positionierung: Relativ positionierte Elemente werden entsprechend ihrer Position im normalen Dokumentenfluss angepasst. Sie können oben, rechts, unten und links einstellen und andere Attribute, um die Position des Elements zu ändern. Relativ positionierte Elemente bleiben im Dokumentenfluss und haben keinen Einfluss auf andere Elemente.

3. Absolute Positionierung (absolut): Absolut positionierte Elemente werden relativ zu ihren nächsten nicht statischen Elementen aus dem Dokumentenfluss gelöst Das positionierte Vorgängerelement wird positioniert. Wenn keine Vorgängerelemente vorhanden sind, erfolgt die Positionierung relativ zum ursprünglichen enthaltenden Block des Dokuments. Sie können oben, rechts, unten und links einstellen und andere Attribute, um die Position des Elements zu ändern. Absolut positionierte Elemente wirken sich auf andere Elemente aus.

4. Feste Positionierung (fixed): Fest positionierte Elemente werden aus dem Dokumentenfluss gelöst und relativ zum Browserfenster positioniert. Sie können oben, rechts, unten und links einstellen und andere Attribute, um die Position des Elements zu ändern. Fest positionierte Elemente wirken sich auf andere Elemente aus.

2. Verwenden Sie die oberen, rechten, unteren und linken Eigenschaften von CSS.

Bei der relativen Positionierungsmethode können Sie die oberen, rechten, unteren und linken Eigenschaften von CSS festlegen Eigenschaften zur präzisen Steuerung der Bildposition. Diese Eigenschaften werden verwendet, um die horizontale bzw. vertikale Position des Bildes festzulegen.

1. oben: Legen Sie den Abstand zwischen dem Bild und der Oberkante des nächsten nicht statisch positionierten Vorgängerelements fest.

2. rechts: Legen Sie den Abstand zwischen dem Bild und dem rechten Rand des nächsten nicht statisch positionierten Vorgängerelements fest.

3. Unten: Legen Sie den Abstand zwischen dem Bild und der Unterkante des nächsten nicht statisch positionierten Vorgängerelements fest.

4. Links: Legen Sie den Abstand zwischen dem Bild und der Unterkante des nächsten nicht statisch positionierten Vorgängerelements fest.

Es ist zu beachten, dass die Werte der Attribute „oben“, „rechts“, „unten“ und „links“ Pixelwerte, Prozentwerte oder Schlüsselwörter sein können (z. B. „Auto“, „Inherit“, „Initial“) Warten). Im tatsächlichen Einsatz können Sie flexibel nach Ihren Bedürfnissen wählen.

3. Verwenden Sie das Transformationsattribut von CSS.

Das Transformationsattribut von CSS kann Elemente wie Drehung, Skalierung, Übersetzung und Neigung transformieren. Bei der relativen Positionierungsmethode können Sie die Transformation verwenden Eigenschaften zum Anpassen der Größe und Position des Bildes.

1. translator(): wird verwendet, um die Übersetzung von Elementen in horizontaler und vertikaler Richtung festzulegen. Der Translationsabstand kann durch Festlegen der x- und y-Eigenschaften gesteuert werden.

2. Scale(): wird verwendet, um das Skalierungsverhältnis von Elementen festzulegen. Sie können die horizontale und vertikale Skalierung steuern, indem Sie die Eigenschaften „scaleX“ und „scaleY“ festlegen.

3. rotieren(): wird verwendet, um den Drehwinkel des Elements festzulegen. Sie können den horizontalen und vertikalen Drehwinkel steuern, indem Sie die Eigenschaften „rotateX“ und „rotateY“ festlegen.

4. skew(): wird verwendet, um den Neigungswinkel des Elements festzulegen. Sie können den horizontalen und vertikalen Neigungswinkel steuern, indem Sie die Eigenschaften skewX und skewY festlegen.

4. Flex-Layout mit CSS

Flex-Layout ist eine moderne und flexible Layoutmethode, mit der problemlos eine nahtlose Integration zwischen Bildern und Seitenelementen erreicht werden kann. Im Flex-Layout können Sie festlegen Flex-Grow-, Flex-Shrink- und Flex-Basis-Eigenschaften zur Steuerung der Bildgröße durch Festlegen von justify-content und align-items Eigenschaften zur Steuerung der Position des Bildes.

1. Flex-Grow: Stellen Sie das Vergrößerungsverhältnis des Elements in vertikaler oder horizontaler Richtung ein. Wenn sich die Bildschirmgröße ändert, wachsen die Elemente flexibel Die Größe des Werts wird automatisch an die neue Bildschirmgröße angepasst.

2. Flex-Schrumpf: Stellen Sie das Schrumpfverhältnis des Elements in vertikaler oder horizontaler Richtung ein. Wenn sich die Bildschirmgröße ändert, verkleinert sich das Element Die Größe des Werts wird automatisch an die neue Bildschirmgröße angepasst.

3. Flex-Basis: Stellen Sie die Basisgröße des Elements in vertikaler oder horizontaler Richtung ein. Wenn sich die Bildschirmgröße ändert, wird das Element entsprechend dem Wert von Flex-Basis und angepasst Die Werte von Flex-Grow und Flex-Shrink werden automatisch an die neue Bildschirmgröße angepasst.

4. justify-content: Legen Sie die horizontale Ausrichtung des Elements fest. Mögliche Werte: Flex-Start (am Startpunkt ausgerichtet), Flex-End (am Ende ausgerichtet), Center (in der Mitte ausgerichtet), Space-Between (an beiden Enden ausgerichtet, gleiche Abstände zwischen den Elementen) und space-around (gleicher Abstand auf beiden Seiten jedes Elements).

Das obige ist der detaillierte Inhalt vonWas ist die relative Positionierungsmethode von Bildern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!