Apakah persamaan dan perbezaan antara unit relatif dan unit mutlak dalam CSS?

CSS (Cascading Style Sheets) ialah bahasa penanda yang digunakan untuk menerangkan gaya elemen pada halaman web. Dalam CSS, terdapat dua unit panjang yang berbeza, iaitu unit relatif dan unit mutlak.

Unit relatif dikira secara relatif kepada saiz elemen itu sendiri atau elemen induknya. Unit relatif biasa ialah: peratusan (%), em dan rem.

Unit peratusan dikira secara relatif kepada saiz elemen induk. Sebagai contoh, jika lebar elemen induk ialah 400px dan lebar elemen anak ditetapkan kepada 50%, maka lebar sebenar elemen anak ialah 200px (400px * 50% = 200px).

unit dikira relatif kepada saiz fon elemen itu sendiri. Contohnya, jika saiz fon elemen ditetapkan kepada 16px, dan lebar elemen kanak-kanak di dalamnya ditetapkan kepada 2em, maka lebar sebenar elemen kanak-kanak itu ialah 32px (16px * 2 = 32px).

unit rem juga dikira secara relatif kepada saiz fon elemen akar (iaitu elemen html). Ini bermakna bahawa tidak kira di mana unit rem dokumen digunakan, mereka akan menilai dengan nilai yang sama. Contohnya, jika saiz fon elemen akar ditetapkan kepada 16px, dan lebar elemen ditetapkan kepada 2rem, maka lebar sebenar elemen ialah 32px (16px * 2 = 32px).

Kelebihan unit relatif ialah ia boleh melaraskan gaya elemen secara dinamik berdasarkan saiz atau saiz fon elemen induk, membolehkan reka bentuk responsif.

Unit mutlak ialah nilai tetap yang ditentukan semasa proses reka bentuk dan tidak akan berubah apabila elemen induk atau saiz fon berubah. Unit mutlak biasa ialah: piksel (px), titik (pt), dan inci (dalam).

Unit piksel ialah unit terkecil yang dipaparkan pada skrin dan merupakan unit mutlak yang paling biasa digunakan. Sebagai contoh, jika lebar elemen ditetapkan kepada 200px, lebar sebenar elemen ialah 200 piksel.

Unit titik ialah unit panjang yang biasa digunakan dalam industri percetakan, dan 1 mata bersamaan dengan 1/72 inci. Dalam CSS, 1pt bersamaan dengan 1.333px (satu piksel adalah lebih kurang sama dengan 0.75 mata), jadi jika lebar elemen ditetapkan kepada 150pt, lebar sebenar elemen ialah 200px (150pt * 1.333 = 199.95px).

Unit inci ialah unit panjang yang diterima di peringkat antarabangsa, 1 inci bersamaan dengan 25.4 milimeter. Jika lebar elemen ditetapkan kepada 2in, lebar sebenar elemen ialah 50.8mm (2in * 25.4 = 50.8mm).

Kelebihan unit mutlak berbanding unit relatif ialah ia memberikan kawalan yang tepat dan sesuai untuk elemen yang memerlukan saiz tetap, seperti sempadan, imej latar belakang, dll.

Berikut ialah beberapa contoh kod khusus yang menunjukkan cara unit relatif dan mutlak digunakan:

/* 使用相对单位百分比 */
.container {
  width: 80%;
  margin: 0 auto;
}

/* 使用相对单位em */
h1 {
  font-size: 2em;
}

/* 使用相对单位rem */
p {
  font-size: 1.5rem;
}

/* 使用绝对单位像素 */
.img {
  width: 300px;
  height: 200px;
}

/* 使用绝对单位点 */
.text {
  font-size: 12pt;
}

/* 使用绝对单位英寸 */
.box {
  width: 2in;
  height: 1in;
}

Melalui contoh kod di atas, kita dapat melihat dengan jelas perbezaan antara unit relatif dan mutlak. Menggunakan unit relatif membolehkan anda menyesuaikan gaya elemen berdasarkan perubahan dalam elemen induk atau saiz fon, manakala menggunakan unit mutlak membolehkan anda mempunyai saiz tetap.

Untuk meringkaskan, unit relatif sesuai untuk reka bentuk responsif, manakala unit mutlak sesuai untuk elemen yang memerlukan saiz tetap. Dalam pembangunan sebenar, kita boleh memilih unit yang sesuai mengikut keperluan yang berbeza untuk mencapai hasil yang terbaik.

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