Apakah klasifikasi unit css?

pengkelasan unit css termasuk unit mutlak dan unit relatif. Pengenalan terperinci: 1. Unit mutlak ialah unit yang berkaitan dengan dimensi fizikal, dan nilainya kekal tetap dalam peranti dan persekitaran yang berbeza, termasuk piksel, inci, sentimeter, milimeter dan titik 2. Unit relatif ialah unit relatif kepada saiz atau environments. , nilainya akan berubah mengikut konteks unit relatif boleh melaksanakan reka letak responsif dan menyesuaikan diri dengan keperluan saiz skrin yang berbeza, termasuk peratusan, unit tetingkap, unit relatif fon dan unit panjang relatif. Memilih unit yang betul membolehkan kawalan yang tepat dan kebolehsuaian kepada saiz skrin yang berbeza.

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

Unit dalam CSS boleh dikelaskan mengikut sifat dan kegunaannya. Mengikut kaedah pengelasan biasa, unit CSS boleh dibahagikan kepada kategori berikut:

1 Unit Mutlak: Unit mutlak ialah unit yang berkaitan dengan dimensi fizikal, dan nilainya berbeza antara peranti dan persekitaran bahagian bawah tetap tetap. Unit mutlak biasa ialah:

- Pixel (Pixel, px): Pixel ialah unit mutlak yang paling biasa digunakan, mewakili titik pada skrin. Piksel tetap dan tidak berubah berdasarkan saiz skrin. Dalam CSS, piksel sering digunakan untuk menentukan atribut seperti saiz, jarak dan sempadan elemen.

- Inci (in): Inci ialah unit fizikal, menunjukkan bahawa 1 inci bersamaan dengan 2.54 sentimeter. Dalam CSS, anda boleh menentukan saiz elemen menggunakan inci sebagai unit saiz.

- Sentimeter (cm): Sentimeter ialah unit fizikal, menunjukkan bahawa 1 sentimeter bersamaan dengan 0.3937 inci. Dalam CSS, anda boleh menentukan saiz elemen menggunakan sentimeter sebagai unit saiz.

- Milimeter (Millimeter, mm): Milimeter ialah unit fizikal, menunjukkan bahawa 1 milimeter bersamaan dengan 0.03937 inci. Dalam CSS, anda boleh menentukan saiz elemen menggunakan milimeter sebagai unit saiz.

- Titik (Titik, pt): Titik ialah unit fizikal, menunjukkan bahawa 1 mata bersamaan dengan 1/72 inci. Dalam CSS, anda boleh menentukan saiz elemen menggunakan titik sebagai unit saiz.

2. Unit relatif ialah unit relatif kepada dimensi lain atau persekitaran, dan nilainya akan berubah mengikut perubahan dalam konteks. Unit relatif membolehkan reka letak responsif dan menyesuaikan diri dengan saiz skrin yang berbeza. Unit relatif biasa ialah:

- Peratusan (%): Peratusan ialah unit ukuran relatif kepada elemen induk. Dalam CSS, anda boleh menggunakan peratusan untuk menentukan saiz, jidar, padding dan sifat lain sesuatu elemen. Sebagai contoh, lebar: 50% bermakna lebar elemen ialah 50% daripada lebar elemen induk.

- Unit Viewport: Unit Viewport ialah unit ukuran relatif kepada viewport penyemak imbas. Unit viewport mengubah saiz elemen berdasarkan saiz tetingkap penyemak imbas. Unit tetingkap biasa ialah:

- Lebar Port Pandangan (vw): Unit lebar tetingkap mewakili peratusan berbanding lebar tetingkap penyemak imbas. Sebagai contoh, lebar: 50vw bermakna lebar elemen ialah 50% daripada lebar tetingkap penyemak imbas.

- Ketinggian Viewport (vh): Unit ketinggian tetingkap mewakili peratusan berbanding ketinggian tetingkap penyemak imbas. Sebagai contoh, ketinggian: 50vh bermakna ketinggian elemen ialah 50% daripada ketinggian tetingkap penyemak imbas.

- Lebar Minimum Viewport (vmin): Unit lebar minimum port view mewakili peratusan berbanding lebar dan ketinggian tetingkap penyemak imbas yang lebih kecil. Sebagai contoh, lebar: 50vmin bermaksud lebar elemen ialah 50% daripada lebar dan ketinggian tetingkap pelayar yang lebih kecil.

- Lebar Maksimum Viewport (vmax): Unit lebar maksimum port view mewakili peratusan berbanding lebar dan ketinggian tetingkap penyemak imbas yang lebih besar. Sebagai contoh, lebar: 50vmax bermakna lebar elemen ialah 50% daripada lebar dan ketinggian tetingkap penyemak imbas yang lebih besar.

- Unit Relatif Font: Unit relatif fon ialah unit relatif kepada saiz fon. Unit relatif fon biasa ialah:

- em: Unit em ialah gandaan saiz fon berbanding elemen. Sebagai contoh, saiz fon: 1.2em bermaksud saiz fon ialah 1.2 kali saiz fon unsur induk.

- rem: Unit rem ialah gandaan saiz fon berbanding elemen akar (iaitu, elemen html). Sebagai contoh, saiz fon: 1.5rem; bermakna saiz fon ialah 1.5 kali saiz fon unsur akar.

- ch: Unit ch ialah gandaan lebar aksara "0". Sebagai contoh, lebar: 10ch bermakna lebar elemen ialah 10 kali lebar aksara "0".

- Unit Panjang Relatif: Unit panjang relatif ialah unit relatif kepada nilai atribut tertentu bagi elemen itu sendiri. Unit panjang relatif biasa ialah:

    - rem: Unit rem ialah gandaan saiz fon berbanding elemen akar (iaitu elemen html). Dalam CSS, anda boleh menggunakan unit rem untuk menentukan saiz, jarak, sempadan dan atribut elemen lain. Unit rem selalunya digunakan untuk melaksanakan dimensi relatif keseluruhan halaman.

- em: Unit em ialah gandaan saiz fon berbanding elemen. Dalam CSS, anda boleh menggunakan unit em untuk menentukan saiz, jarak, sempadan dan atribut elemen lain. Unit em boleh melaraskan saiz elemen berdasarkan saiz fonnya sendiri.

Pemilihan unit ini bergantung pada keperluan khusus dan keperluan reka bentuk. Unit mutlak sesuai untuk situasi di mana kawalan saiz yang tepat diperlukan, manakala unit relatif sesuai untuk situasi di mana reka letak responsif dan kebolehsuaian kepada saiz skrin yang berbeza diperlukan. Apabila memilih unit, anda perlu mengambil kira perbezaan antara peranti dan skrin yang berbeza untuk memastikan halaman itu konsisten dan boleh disesuaikan pada peranti yang berbeza.

Untuk meringkaskan, unit CSS boleh dikelaskan mengikut ciri dan kegunaannya, termasuk unit mutlak (piksel, inci, sentimeter, milimeter, titik) dan unit relatif (peratusan, unit tetingkap, unit relatif fon) . Unit relatif juga boleh dibahagikan kepada unit panjang relatif. Memilih unit yang betul membolehkan kawalan yang tepat dan kebolehsuaian kepada saiz skrin yang berbeza.

Atas ialah kandungan terperinci Apakah klasifikasi unit css?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!