Apakah unit panjang CSS yang biasa digunakan?

Unit panjang yang paling biasa digunakan dalam CSS ialah piksel (px), peratusan (%), rem, em, vh, vw, pt, cm, mm, in, dsb. Unit ini boleh digunakan untuk menetapkan lebar, ketinggian, saiz sempadan, saiz fon, dsb.

1. Unit piksel (px) ialah salah satu unit yang paling biasa digunakan. Ia ialah unit panjang tetap yang dikira secara relatif kepada piksel fizikal skrin elektronik. Berikut ialah contoh kod:

div {
    width: 200px;
    height: 100px;
    font-size: 16px;
    border: 1px solid #000;
}

Dalam contoh kod di atas, lebar atribut width 和 height 属性使用了像素单位来定义 div 元素的宽度和高度，font-size 属性使用像素单位来定义字体大小，border juga dalam unit piksel.

2. Peratus (%) unit dikira secara relatif kepada saiz elemen induk. Berikut ialah contoh kod:

div {
    width: 50%;
    height: 50%;
}

Dalam contoh kod di atas, lebar dan tinggi elemen div ditetapkan kepada 50% daripada dimensi elemen induk.

3. unit rem dikira relatif kepada saiz fon unsur akar (iaitu elemen html). Berikut ialah contoh kod:

html {
    font-size: 16px;
}

div {
    width: 10rem;
    height: 5rem;
    font-size: 1.2rem;
}

Dalam contoh kod di atas, saiz fon unsur akar ditetapkan kepada 16px, lebar dan tinggi unsur div ialah 10 kali saiz fon unsur akar dan fon saiz adalah 10 kali saiz fon unsur akar 1.2 kali. Unit

4. em dikira relatif kepada saiz fon elemen itu sendiri. Berikut ialah contoh kod:

div {
    font-size: 16px;
    width: 2em;
    height: 2em;
}

Dalam contoh kod di atas, lebar dan tinggi elemen div ditetapkan kepada dua kali ganda saiz fon elemen itu sendiri.

Selain unit di atas, terdapat beberapa unit panjang lain:

• vh (ketinggian viewport) mewakili peratusan berbanding ketinggian viewport.
• vw (lebar viewport) mewakili peratusan berbanding lebar viewport.
• pt (titik) ialah unit cetakan, 1pt lebih kurang sama dengan 1/72 inci.
• cm (sentimeter) bermaksud sentimeter, 1cm adalah lebih kurang sama dengan 96px/2.54.
• mm (milimeter) bermaksud milimeter, 1mm adalah lebih kurang sama dengan 96px/25.4.
• in (inci) bermaksud inci, 1in adalah lebih kurang sama dengan 96px.

Ringkasnya, adalah perlu untuk memilih unit panjang yang sesuai dalam situasi yang berbeza untuk mencapai kesan terbaik.

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