Gunakan unit susun atur CSS yang betul untuk mencipta reka bentuk web yang cantik

Pilih unit reka letak CSS yang sesuai untuk mencipta reka bentuk web yang elegan

Dalam reka bentuk web, unit reka letak CSS adalah bahagian yang penting. Unit reka letak yang berbeza boleh membantu kami mengawal saiz, jarak dan kedudukan elemen halaman web dengan lebih baik, dengan itu mencipta reka bentuk web yang elegan dan cantik. Artikel ini akan memperkenalkan beberapa unit susun atur CSS biasa dan memberikan contoh kod khusus.

1. Unit piksel (px)

Piksel ialah salah satu unit reka letak CSS yang paling biasa. Ia mempunyai saiz tetap dan sesuai untuk situasi di mana kawalan tepat ke atas saiz dan kedudukan elemen diperlukan. Sebagai contoh, kita boleh menetapkan lebar elemen kepada 200 piksel menggunakan unit piksel:

.element {
  width: 200px;
}

2. Peratus (%) unit

Peratus unit dikira relatif kepada saiz elemen induk, yang boleh membantu kami melaksanakan reka letak responsif . Dengan menggunakan unit peratusan, kami boleh mengubah saiz elemen secara automatik apabila saiz skrin berubah. Sebagai contoh, kita boleh menggunakan unit peratusan untuk menetapkan lebar elemen kepada 50% daripada elemen induk:

.element {
  width: 50%;
}

3. Lihat unit tetingkap (vw, vh)

Lihat unit tetingkap merujuk kepada unit berbanding saiz tetingkap pelayar. Unit vw (lebar viewport) mewakili nisbah relatif kepada lebar viewport, dan unit vh (viewport height) mewakili nisbah relatif kepada ketinggian viewport. Unit tetingkap digunakan secara meluas dalam reka bentuk responsif dan boleh mengubah saiz elemen secara dinamik berdasarkan saiz tetingkap.

Sebagai contoh, kita boleh menggunakan unit vw untuk menetapkan lebar elemen kepada 30% daripada lebar viewport:

.element {
  width: 30vw;
}

4. em dan unit rem

unit em ialah unit yang dikira relatif kepada saiz fon elemen induk , dan unit rem Adakah unit dikira relatif kepada saiz fon unsur akar (html). Unit em dan rem boleh membantu kami mencapai reka letak saiz relatif tanpa mengira saiz fon.

Sebagai contoh, kita boleh menetapkan lebar elemen kepada 2 kali ganda saiz fon menggunakan unit em:

.element {
  width: 2em;
}

5. Unit penyesuaian (fr)

Unit penyesuaian (fr) ialah unit dalam susun atur Grid CSS, Digunakan untuk memperuntukkan ruang yang tinggal secara automatik. Unit fr boleh membantu kami mencapai susun atur elemen teragih sekata, terutamanya sesuai untuk susun atur grid.

Sebagai contoh, kita boleh menggunakan unit fr untuk melaksanakan susun atur dua lajur yang ringkas:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

Dengan memilih unit susun atur CSS yang sesuai, kita boleh mengawal reka letak halaman web dengan lebih fleksibel, seterusnya mencipta web yang elegan dan cantik reka bentuk. Di atas ialah beberapa unit susun atur CSS biasa, setiap satunya mempunyai ciri dan senario aplikasi yang berbeza. Saya harap artikel ini dapat membantu anda menggunakan unit reka letak dengan lebih baik dan meningkatkan kualiti serta kesan reka bentuk web.

Atas ialah kandungan terperinci Gunakan unit susun atur CSS yang betul untuk mencipta reka bentuk web yang cantik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!