Perbezaan antara unit relatif dan unit mutlak dalam CSS

Apakah perbezaan antara unit relatif dan unit mutlak dalam CSS Contoh kod khusus diperlukan

Unit dalam CSS boleh dibahagikan kepada unit relatif dan unit mutlak. Unit relatif menentukan saiz relatif kepada saiz elemen itu sendiri atau elemen induknya, manakala unit mutlak menentukan saiz berbanding saiz skrin atau media cetak. Artikel ini akan memperkenalkan secara terperinci perbezaan antara unit relatif dan unit mutlak dalam CSS, dan memberikan contoh kod yang sepadan.

1. Unit relatif

1. em

em ialah unit yang ditentukan secara relatif kepada saiz fon elemen induk. Apabila anda mentakrifkan saiz fon elemen sebagai 1em, ia akan sama dengan saiz fon elemen induk. ems boleh digunakan secara berturut-turut, dengan setiap em dikira relatif kepada saiz em sebelumnya. Contohnya, jika saiz fon elemen induk ialah 16px dan saiz fon elemen anak ditakrifkan sebagai 1.5em, maka saiz fon elemen anak ialah 24px (1.5 * 16px).

Kod sampel:

.parent {
  font-size: 16px;
}

.child {
  font-size: 1.5em;
}

2. rem

rem juga merupakan unit relatif, tetapi ia ditentukan secara relatif kepada saiz fon unsur akar (unsur html). Penggunaan rem adalah serupa dengan em, tetapi ia tidak mewarisi saiz fon unsur induk, hanya saiz fon unsur akar. Ini mengelakkan pengiraan terkumpul saiz fon apabila bersarang berbilang peringkat.

Kod sampel:

html {
  font-size: 16px;
}

.child {
  font-size: 1.5rem;
}

2. Unit mutlak

1. px

Pixel (piksel) ialah unit mutlak, ia adalah unit terkecil yang dipaparkan pada skrin. px digunakan dalam CSS untuk menentukan lebar, ketinggian, sempadan dan saiz elemen lain. Ia tidak terjejas oleh zum penyemak imbas, dan saiz piksel kekal sama tidak kira bagaimana pengguna mengubah saiz tetingkap penyemak imbas.

Kod contoh:

element {
  width: 200px;
  height: 100px;
  border: 2px solid #000;
}

2. cm

Sentimeter (sentimeter) ialah unit mutlak, yang relatif kepada saiz fizikal. Menggunakan unit cm dalam media cetak membolehkan kawalan yang lebih tepat ke atas saiz elemen.

Kod contoh:

element {
  width: 10cm;
  height: 5cm;
}

Di atas ialah perbezaan antara unit relatif dan unit mutlak dalam CSS dan contoh kod yang sepadan. Melalui perbandingan dan amalan, kita boleh lebih memahami dan menggunakan unit ini serta mengawal saiz dan reka letak elemen secara fleksibel. Dalam pembangunan sebenar, memilih unit yang sesuai mengikut keperluan boleh menjadikan halaman web atau aplikasi lebih sesuai dengan kesan paparan peranti dan saiz skrin yang berbeza.

Atas ialah kandungan terperinci Perbezaan antara unit relatif dan unit mutlak dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!