Bagaimanakah atribut CSS3 melaksanakan susun atur dan susunan imej dalam halaman web?

Bagaimanakah atribut CSS3 melaksanakan susun atur dan susunan imej dalam halaman web?

Pengenalan: Dalam reka bentuk web, gambar adalah salah satu elemen yang sangat diperlukan. Reka letak dan susunan imej yang munasabah boleh meningkatkan kesan visual dan pengalaman pengguna halaman web. Artikel ini akan memperkenalkan beberapa sifat CSS3 yang biasa digunakan untuk membantu merealisasikan reka letak dan susunan imej dalam halaman web.

1. Atribut saiz kotak
Atribut saiz kotak digunakan untuk menetapkan jenis model kotak bagi elemen. Secara lalai, atribut lebar dan ketinggian elemen hanyalah lebar dan tinggi kandungan elemen itu sendiri, dan tidak termasuk padding, jidar dan jidar elemen. Tingkah laku ini boleh diubah menggunakan atribut saiz kotak, yang termasuk pelapik dan jidar dalam atribut lebar dan ketinggian elemen. Apabila meletakkan imej, anda boleh mengira saiz imej dengan lebih mudah dengan menetapkan saiz kotak kepada kotak sempadan.

Contoh:
img {
saiz kotak: kotak sempadan;
lebar: 300px;
tinggi: 200px;
padding: 10px;
jidar: 1px hitam pepejal;
}

gunakan atribut paparan
Digunakan untuk menetapkan jenis susun atur sesuatu elemen. Apabila meletakkan dan menyusun gambar, jenis susun atur yang biasa digunakan termasuk sebaris, blok dan lentur.

1. reka letak sebaris: Apabila elemen ditetapkan kepada sebaris, elemen itu akan dibentangkan sebaris dan boleh dipaparkan pada baris yang sama dengan elemen sebaris yang lain. Untuk susunan gambar mendatar, anda boleh menetapkan gambar kepada sebaris.

Contoh:
img {
paparan: sebaris;
}

2. reka letak sekat: Apabila elemen ditetapkan untuk menyekat, elemen akan menduduki barisnya sendiri, dan lebar, tinggi dan atribut lain boleh ditetapkan. Untuk susunan gambar menegak, anda boleh menetapkan gambar untuk disekat. . Untuk susun atur dan susunan gambar yang kompleks, anda boleh menggunakan susun atur fleksibel.

Contoh:
.bekas {
paparan: flex;
flex-wrap: wrap; // Line wrap

}

img {
3. flex: 1; // Bahagikan lebar bekas induk sama banyak
}

. Atribut terapung

Atribut terapung digunakan untuk mengapungkan elemen ke kiri atau kanan. Apabila menyusun gambar, anda boleh menetapkan gambar terapung untuk memisahkannya daripada aliran dokumen dan mengapungkannya ke kiri atau kanan untuk mencapai kesan susunan gambar.

Contoh:
.img-kiri {
terapung: kiri;
jidar-kanan: 10px;
}
.img-kanan {

apungan: kanan;

jidar-kiri: 10px;
}

fit attribute
Dalam halaman web, imej mempunyai saiz yang berbeza Untuk mengekalkan kesatuan visual halaman web, anda boleh menggunakan atribut object-fit untuk melaraskan saiz dan perkadaran imej dalam bekas. Nilai yang biasa digunakan termasuk kandungan dan penutup.


mengandungi: Skalakan imej agar sesuai dengan saiz bekas, mengekalkan perkadaran asal. Jika nisbah bidang imej tidak sepadan dengan nisbah bidang bekas, ruang putih akan muncul.


Contoh:
img {

object-fit: contain;

}

cover: Skala imej untuk mengisi saiz bekas, mengekalkan perkadaran asal. Jika nisbah bidang imej tidak sepadan dengan nisbah bidang bekas, sebahagian daripada imej akan dipangkas.

Contoh:

img {
object-fit: cover;
}

5 atribut grid

CSS3 grid model ialah model reka letak dua dimensi yang boleh membahagikan halaman web kepada baris dan lajur untuk memudahkan susun atur imej dan susunan. Apabila melakukan reka letak imej yang kompleks, anda boleh menggunakan atribut grid.
2. Contoh:

.container {

paparan: grid;
grid-template-columns: repeat(3, 1fr); // Dibahagikan kepada 3 lajur
grid-gap: 10px; // Ruang antara lajur ialah 10px
}

img {

lebar: 100%;
tinggi: auto;

}

Kesimpulan: Di atas adalah beberapa atribut CSS3 yang biasa digunakan untuk membantu merealisasikan reka letak dan susunan imej dalam halaman web. Melalui susun atur dan susunan yang munasabah, kesan visual dan pengalaman pengguna halaman web boleh dipertingkatkan. Saya harap artikel ini akan membantu anda menggunakan CSS3 untuk melaksanakan susun atur dan susunan imej dalam reka bentuk web.

Atas ialah kandungan terperinci Bagaimanakah atribut CSS3 melaksanakan susun atur dan susunan imej dalam halaman web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!