Unități de mărime în css, lecții, webreference

Există multe proprietăți CSS care necesită dimensiune ca unitate:

  • font-size determină dimensiunea textului;
  • lățimea graniței determină grosimea granițelor elementelor;
  • marginea definește spațiul dintre elemente;
  • stânga / dreapta / sus / jos vă permit să poziționați și să mutați elemente.

Cele mai frecvent utilizate unități sunt:







  • px pentru pixeli;
  • % pentru dobândă;
  • em pentru a determina dimensiunea relativă la valoarea mărimii fontului părinte.

Deoarece ecranele computerului folosesc pixeli pentru a afișa conținut, aceasta este cea mai comună unitate de dimensiune în CSS.

Un pixel poate fi folosit pentru a specifica o lățime fixă ​​pentru un element:

Sau setați dimensiunea textului:

Pixelii în CSS sunt simpli, deoarece definesc valori absolute și nu depind de alte proprietăți CSS moștenite.

Ele sunt, de asemenea, utilizate pe scară largă pentru poziționare și distanță.

Procentajele sunt unități relative. se bazează pe părintele și / sau pe strămoșii elementului.

De exemplu, elementele blocului, cum ar fi paragrafele, ocupă în mod natural toată lățimea disponibilă. Următoarea regulă CSS își va modifica dimensiunea la jumătate din lățimea disponibilă.

Interesul vă poate ajuta să setați alte proprietăți CSS, cum ar fi dimensiunea textului.

em este o unitate relativă și depinde de dimensiunea fontului elementului.







De exemplu, dacă parintele pentru mărimea fontului este setată la 20px și aplicați elementului copil o dimensiune a fontului: 0.8cm, atunci acest element copil va afișa dimensiunea fontului ca 16px.

Nu confunda dimensiunea em cu selectorul em. care este orientat spre element .

Unitatea em este interesantă pentru determinarea dimensiunii fontului elementelor HTML relativ una de alta. Pentru a crea o pagină web atractivă și confortabilă, trebuie să oferiți profunzime vizuală. De exemplu, vrei tu

au fost de două ori mai mari decât textul principal

De 1,5 ori mai mult, iar panoul lateral este puțin mai mic. Acest lucru poate fi ușor obținut în CSS:

Dacă decideți să modificați mărimea textului . dimensiunile relative ale anteturilor și bara laterală se vor schimba corespunzător, iar pagina dvs. web va rămâne echilibrată vizual.

Numai modificarea unei valori va schimba toate celelalte valori:

Unitatea em rem similar, dar în loc de valori ale societății-mamă, aceasta se bazează pe valoarea elementului rădăcină. care este un element .

Diferența dintre rem em și că rem valoare este fixă, în timp ce valoarea le sunt multiplicate unele cu altele.

Dacă ați instalat html :

  • 2rem va fi întotdeauna 36px, indiferent de locul în care este folosit în CSS;
  • 2em va fi întotdeauna egală cu dublul font-size al părintelui, care nu este neapărat egal cu 36px.

Un exemplu rapid în care 2em diferă de 2rem:

se bazează pe valoarea dimensiunii fontului pentru <р>. în timp ce se bazează pe valoarea dimensiunii fontului pentru .

Ce unitate ar trebui să folosesc?

Aș recomanda începând cu pixeli. deoarece aceasta este o valoare absolută, ele nu depind de contextul elementului. Pixeli simplu, permite să setați dimensiunea textului, lățimea și înălțimea imaginii, grosimea poziției de frontieră coordonate, și altele.

Procentele și valorile em pot fi utilizate împreună cu pixelii, în special pentru dimensiunile relative ale textului.







Articole similare

Pagina anterioară

Pagina următoare

Trimiteți-le prietenilor: