44.11 CSS Sizing

În lecția aceasta vom învăța despre cum putem controla dimensiunile elementelor HTML cu ajutorul CSS. Aceasta este o abilitate esențială pentru a construi layout-uri coerente și a asigura că elementele sunt afișate în modul dorit.

Există mai multe moduri de a specifica dimensiunile elementelor HTML cu ajutorul CSS. Două dintre cele mai comune sunt:

1. Dimensiuni absolute

Acest tip de dimensiune specifică o valoare fixă pentru înălțimea și/sau lățimea elementului. Aceasta se realizează cu ajutorul proprietăților height și width.

.example-element {
  height: 100px;
  width: 200px;
}

2. Dimensiuni relative

O metodă mai flexibilă de a specifica dimensiunile elementelor este utilizarea dimensiunilor relative. Aceste dimensiuni se bazează pe dimensiunea elementelor părinte sau alte atribute CSS. Cele mai comune dimensiuni relative sunt:

• em: dimensiunea fontului elementului curent
• rem: dimensiunea fontului elementului rădăcină
• vw și vh: procentul din lățimea și, respectiv, înălțimea ferestrei vizuale
• fr: procentajul din spațiul disponibil pe rând (pentru elementele afișate într-o grilă)

.example-element {
  height: 50%;
  width: 75vw;
  font-size: 1.5rem;
}

Să vedem acum un exemplu de utilizare a dimensiunilor relative. Să presupunem că vrem să afișăm un meniu de navigare care ocupă întreaga lățime a ecranului, dar trebuie să fie înălțimea de doar 60 de pixeli. Folosind dimensiuni absolute, trebuie să alegem o lățime fixă pentru meniu, ceea ce poate să nu fie ideal pentru toate dimensiunile ecranelor.

Pentru a realiza acest lucru folosind dimensiuni relative, putem construi un element părinte cu o înălțime fixă și o lățime relativă. Apoi, putem construi elementul meniu cu o înălțime relativă și o lățime de 100%. În acest fel, meniul va ocupa întreaga lățime a ecranului, dar va avea o înălțime fixă de 60 de pixeli.

<div class="menu-container">
  <ul class="menu">
    <li><a href="#">Acasă</a></li>
    <li><a href="#">Despre noi</a></li>
    <li><a href="#">Produse</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

.menu-container {
  height: 60px;
  width: 100%;
}

.menu {
  display: flex;
  height: 100%;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  flex-grow: 1;
  text-align: center;
}

.menu li a {
  color: #333;
  display: block;
  font-size: 1.2rem;
  line-height: 60px;
  text-decoration: none;
}

Așadar, dimensiunile relative sunt un instrument puternic pentru a construi layout-uri flexibile și responsive. Acum că am învățat despre ele, putem începe să le folosim în proiectele noastre pentru a crea interfețe web mai bune și mai eficiente.