September 12, 2024

CSS Units

CSS units lar bu sahifani turli qurilmalarga moslashtirishda ishlatiladigan o'lchov birligi hisoblanadi.

CSS unitslar:

  • % foiz o'lchov birligi
  • em o'chov bilrligi
  • rem o'lchov bilrlig
  • vh, vw o'lchov birliklari

Foiz o'lchov birligi

Foiz o'lchov birligi position xossasining qiymatiga qarab turlicha bo'ladi.

Agar element position: fixed; qiymatiga ega bo'lsa u holda elementga berilgan foiz o'lchov birligi qiymati viewportga nisbatan o'lchanadi.

Masalan elementimizga width: 50% beradigan bo'lsa viewportning kengligi 1400px bo'lsa u holda element kengligi 700px ga teng bo'ladi.

Agar elementga position: absolute; qiymati berilgan bo'lsa u holda bu element eng yaqin positioned ajdod elementining content va padding xususiyatlari qiymatlari yig'indisiga nisbatan o'zgaradi.

Masalan elementimizga width: 50% beradigan bo'lsa shu elementning parent elementi 1400px va paddinggi chap va o'ng tomondan 50px bo'ladigan bo'lsa u holda elementning kengligi 750px ga teng bo'ladi. (1400+50+50)*50% = 750px

Agar elementga position: static; yoki position: relative berilgan bo'lsa elementga width xususiyatiga foiz o'chov birligi berilda u holda element eng yaqin blok turidagi elementning content qiymatiga nisbatan o'zgaradi.

Masalan elementning eng yaqin blok elementi contenti 1400px (padding hisobga olinmaydi) ga teng bo'lsa u holda elementga width: 50%; qiymati berilsa element kengligi 700px ga teng bo'ladi.

em o'lchov birlig

em o'lchov birlig elementning font-size qiymatiga nisbatan o'zgaradi. Agar elementda font-size qiymati bo'lmasa u holda eng yaqin ajdod elementi font-size qiymatiga murojaat qilinadi. Unda ham bo'lmasa brovzerning default qiymatiga nisbatan olinadi.

rem o'lchov birligi

rem o'lchov birligi sahifamizning root elementining font-size qiymatiga qarab hisoblanadi. Root elementi bu html elementidir