Apakah kaedah kedudukan relatif imej?

Kaedah kedudukan relatif imej adalah menggunakan atribut kedudukan CSS, atribut atas, kanan, bawah dan kiri CSS, atribut transformasi CSS dan susun atur fleksibel CSS. Pengenalan terperinci: 1. Gunakan atribut kedudukan CSS, termasuk empat nilai: kedudukan statik, kedudukan relatif, kedudukan mutlak dan kedudukan tetap 2. Gunakan atribut atas, kanan, bawah dan kiri CSS, dsb.

Sistem pengendalian tutorial ini: sistem Windows 10, komputer DELL G3.

Penempatan imej relatif ialah kaedah reka letak imej yang sering digunakan dalam reka bentuk web Ia membolehkan imej diletakkan secara relatif mengikut saiz dan kedudukan elemen halaman, dengan itu mencapai penyepaduan yang lancar antara imej dan elemen halaman. Secara khusus, kaedah kedudukan relatif imej boleh dilaksanakan mengikut aspek berikut:

1. Gunakan atribut kedudukan CSS

Atribut kedudukan CSS digunakan untuk menentukan kedudukan elemen pada halaman, termasuk statik (kedudukan statik), relatif (kedudukan relatif), mutlak (kedudukan mutlak) dan Tetap (kedudukan tetap) empat nilai. Antaranya, kedudukan relatif (relative) adalah nilai yang paling biasa digunakan dalam kaedah kedudukan relatif imej.

1. Kedudukan statik (statik): Kedudukan statik ialah kaedah penentududukan lalai bagi elemen, dan elemen disusun mengikut aliran dokumen biasa. Dalam kaedah penentududukan ini, elemen tidak akan dipengaruhi oleh bahagian atas, kanan, bawah dan pengaruh atribut seperti kiri.

2. Kedudukan relatif: Elemen yang diposisikan secara relatif akan dilaraskan mengikut kedudukannya dalam aliran dokumen biasa. Anda boleh menetapkan atas, kanan, bawah dan kiri dan atribut lain untuk menukar kedudukan elemen. Elemen yang diposisikan secara relatif kekal dalam aliran dokumen dan tidak mempunyai kesan pada elemen lain.

3 Kedudukan mutlak (mutlak): Elemen yang diletakkan secara mutlak akan terlepas daripada aliran dokumen, berbanding dengan bukan statik yang terdekat. Unsur nenek moyang berkedudukan diposisikan. Jika tiada unsur nenek moyang, kedudukan adalah relatif kepada blok asal yang mengandungi dokumen. Anda boleh menetapkan atas, kanan, bawah dan kiri dan atribut lain untuk menukar kedudukan elemen. Elemen yang diletakkan secara mutlak memberi kesan kepada elemen lain.

4. Kedudukan tetap (tetap): Elemen kedudukan tetap akan terlepas daripada aliran dokumen dan diletakkan secara relatif kepada tetingkap penyemak imbas. Anda boleh menetapkan atas, kanan, bawah dan kiri dan atribut lain untuk menukar kedudukan elemen. Elemen kedudukan tetap mempunyai kesan pada elemen lain.

2 Gunakan sifat atas, kanan, bawah dan kiri CSS

Dalam kaedah penentududukan relatif, anda boleh menetapkan sifat atas, kanan, bawah dan kiri CSS. Sifat untuk mengawal kedudukan imej dengan tepat. Sifat ini digunakan untuk menetapkan kedudukan mendatar dan menegak imej masing-masing.

1 atas: Tetapkan jarak antara imej dan tepi atas unsur nenek moyang tidak statik yang terdekat.

2 kanan: Tetapkan jarak antara imej dan tepi kanan unsur nenek moyang tidak statik yang terdekat.

3 Bawah: Tetapkan jarak antara imej dan tepi bawah unsur nenek moyang tidak statik yang terdekat.

4 kiri: Tetapkan jarak antara imej dan tepi bawah unsur nenek moyang tidak statik yang terdekat.

Perlu diingatkan bahawa nilai atribut atas, kanan, bawah dan kiri boleh menjadi nilai piksel, nilai peratusan atau kata kunci (seperti: auto, inherit, initial tunggu). Dalam penggunaan sebenar, anda boleh memilih secara fleksibel mengikut keperluan anda.

3 Gunakan atribut transformasi CSS

Atribut transformasi CSS boleh mengubah elemen seperti putaran, penskalaan, terjemahan dan kecondongan. Dalam kaedah penentududukan relatif, anda boleh menggunakan transformasi Sifat untuk melaraskan saiz dan kedudukan imej.

1. terjemah(): digunakan untuk menetapkan terjemahan unsur dalam arah mendatar dan menegak. Jarak terjemahan boleh dikawal dengan menetapkan sifat x dan y.

2. skala(): digunakan untuk menetapkan nisbah penskalaan unsur. Anda boleh mengawal penskalaan mendatar dan menegak dengan menetapkan sifat skalaX dan skalaY.

3. rotate(): digunakan untuk menetapkan sudut putaran elemen. Anda boleh mengawal sudut putaran mendatar dan menegak dengan menetapkan sifat rotateX dan rotateY.

4. condong(): digunakan untuk menetapkan sudut kecondongan elemen. Anda boleh mengawal sudut kecondongan mendatar dan menegak dengan menetapkan sifat skewX dan skewY.

4. Reka letak fleksibel menggunakan CSS

Reka letak fleksibel ialah kaedah reka letak moden dan fleksibel yang boleh mencapai penyepaduan yang lancar antara imej dan elemen halaman. Dalam susun atur fleksibel, anda boleh menetapkan sifat flex-grow, flex-shrink dan flex-basis untuk mengawal saiz imej dengan menetapkan justify-content dan align-item Sifat untuk mengawal kedudukan imej.

1. flex-grow: Tetapkan nisbah pembesaran elemen dalam arah menegak atau mendatar. Apabila saiz skrin berubah, elemen akan flex-tumbuh mengikut Nilai berubah secara automatik agar sesuai dengan saiz skrin baharu.

2. flex-shrink: Tetapkan nisbah pengecutan elemen dalam arah menegak atau mendatar. Apabila saiz skrin berubah, elemen akan mengecut-flex Nilai berubah secara automatik agar sesuai dengan saiz skrin baharu.

3. Asas lentur: Tetapkan saiz asas elemen dalam arah menegak atau mendatar. Apabila saiz skrin berubah, elemen akan dilaraskan mengikut nilai asas-flex dan Nilai flex-grow dan flex-shrink diubah saiz secara automatik agar sesuai dengan saiz skrin baharu.

4. justify-content: Tetapkan penjajaran mendatar elemen. Nilai yang mungkin: flex-start (diselaraskan pada titik permulaan), flex-end (diselaraskan pada penghujung), tengah (dijajarkan di tengah), ruang-antara (diselaraskan pada kedua-dua hujung, selang yang sama antara elemen) dan ruang sekeliling (ruang yang sama pada kedua-dua belah setiap elemen).

Atas ialah kandungan terperinci Apakah kaedah kedudukan relatif imej?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!