Rumah > hujung hadapan web > tutorial css > Apakah unit yang tersedia dalam CSS?

Apakah unit yang tersedia dalam CSS?

百草
Lepaskan: 2023-10-18 14:15:41
asal
949 orang telah melayarinya

Unit yang tersedia untuk CSS termasuk piksel, peratusan, em, rem, vw, vh, vmin, vmax, pt, cm, mm dan dalam, dsb. Pengenalan terperinci: 1. Pixel ialah unit yang paling biasa digunakan, yang mewakili piksel fizikal pada skrin Pixel ialah unit yang agak tetap dan mungkin sepadan dengan saiz fizikal yang berbeza pada peranti yang berbeza 2. Unit peratusan adalah relatif kepada elemen induk Saiznya dikira. .

Apakah unit yang tersedia dalam CSS?

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

Dalam CSS, terdapat pelbagai unit yang boleh digunakan untuk menentukan saiz, jarak dan sifat elemen lain. Unit ini boleh dibahagikan kepada dua kategori: unit mutlak dan unit relatif. Berikut ialah beberapa unit CSS yang biasa digunakan:

1 Piksel (px): Piksel ialah unit yang paling biasa digunakan, yang mewakili piksel fizikal pada skrin. Pixel ialah unit yang agak tetap dan mungkin sepadan dengan saiz fizikal yang berbeza pada peranti yang berbeza.

2 Peratus (%): Unit peratusan dikira secara relatif kepada saiz elemen induk. Sebagai contoh, jika lebar elemen ditetapkan kepada 50%, lebarnya ialah separuh lebar elemen induknya.

3. em (em): Unit em dikira relatif kepada saiz fon elemen. Sebagai contoh, jika saiz fon elemen ditetapkan kepada 2em, maka dimensinya akan menjadi dua kali ganda saiz fon elemen induk.

4. rem (rem): Unit rem dikira relatif kepada saiz fon elemen akar (iaitu, elemen html). Tidak seperti em, pengiraan unit rem tidak dipengaruhi oleh saiz fon elemen induk.

5 vw dan vh: Unit vw dan vh masing-masing mewakili peratusan lebar ruang pandang. Port pandangan merujuk kepada kawasan yang boleh dilihat pada tetingkap penyemak imbas atau skrin peranti. Sebagai contoh, jika lebar elemen ditetapkan kepada 50vw, maka lebarnya akan menjadi separuh lebar ruang pandang.

6 vmin dan vmax: Unit vmin dan vmax masing-masing mewakili peratusan nilai yang lebih kecil atau lebih besar bagi lebar dan ketinggian port pandangan. Sebagai contoh, jika ketinggian elemen ditetapkan kepada 50vmin, ketinggiannya akan menjadi separuh lebih kecil daripada lebar port pandangan atau ketinggian port pandangan.

7 pt (titik): Unit pt ialah unit panjang yang biasa digunakan dalam industri percetakan.

8 cm (sentimeter): Unit cm ialah sentimeter, 1cm bersamaan dengan 10 milimeter.

9 mm (milimeter): Unit mm ialah milimeter.

10 in (inci): Unit in ialah inci, 1 in bersamaan dengan 2.54 sentimeter.

Selain unit panjang yang biasa digunakan yang disebutkan di atas, CSS juga mempunyai beberapa unit relatif dan unit mutlak yang lain, seperti ex, ch, pc, dll. Penggunaannya agak terhad dan secara amnya tidak biasa digunakan untuk susun atur dan definisi saiz .

Dalam pembangunan sebenar, pemilihan unit panjang yang sesuai bergantung pada keperluan khusus dan keperluan reka bentuk. Unit relatif (seperti peratusan, em, rem, dsb.) lebih sesuai untuk reka letak responsif dan pembangunan peranti mudah alih, manakala unit mutlak (seperti piksel, sentimeter, dsb.) lebih sesuai untuk takrifan elemen saiz tetap dan gaya tipografi. Pada masa yang sama, anda perlu memberi perhatian kepada penukaran dan keserasian antara unit yang berbeza untuk mengelakkan kekeliruan saiz atau paparan yang tidak normal.

Secara umum, unit yang tersedia untuk CSS termasuk piksel, peratusan, em, rem, vw, vh, vmin, vmax, pt, cm, mm dan in, dsb. Memilih unit yang betul berdasarkan keperluan khusus membolehkan susun atur dan definisi saiz yang fleksibel, memberikan pengalaman pengguna yang baik.

Atas ialah kandungan terperinci Apakah unit yang tersedia dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan