Rumah > hujung hadapan web > tutorial css > Apakah unit panjang CSS yang biasa digunakan?

Apakah unit panjang CSS yang biasa digunakan?

WBOY
Lepaskan: 2024-02-19 21:10:06
asal
526 orang telah melayarinya

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;
}
Salin selepas log masuk

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

  1. Peratus (%) unit dikira secara relatif kepada saiz elemen induk. Berikut ialah contoh kod:
div {
    width: 50%;
    height: 50%;
}
Salin selepas log masuk

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

  1. 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;
}
Salin selepas log masuk

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

  1. em dikira relatif kepada saiz fon elemen itu sendiri. Berikut ialah contoh kod:
div {
    font-size: 16px;
    width: 2em;
    height: 2em;
}
Salin selepas log masuk

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!

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