Introducere în Web Development

Se pot seta dimensiunile unui element folosind proprietățile width (lățime) și height (înălțime). Dimensiunile au nevoie de unități de mărime.

Se mai poate folosi cuvântul cheie auto, care va face browserul să calculeze automat acea dimensiune. E util de exemplu atunci când vrei să dimensionezi o imagine, fără să o turtești.

Dacă folosești procente, sau auto, ca valori ale proprietăților width sau height, poți seta niște limite, prin proprietățile:

• min-width

• max-width

• min-height

• max-height

Astfel elementele tale nu vor deveni nici prea mici, nici prea mari.

box-sizing

Fiecare element este de fapt format din câteva cutii puse una în alta.

Cea mai mică cutie o reprezintă conținutul (content-box). Acesta conține toate elementele din interiorul elementului părinte.

Cutia de conținut este pusă în alta care conține și padding-ul (padding-box).

Cutia cu padding este pusă într-una care conține și border-ul (border-box).

Prin proprietatea box-sizing, definim pe care cutie se aplică width și height:

• content-box

• border-box

Nu se pot seta dimensiuni pe padding-box.

                    .box {
  width: 100px;
  padding: 20px;
  border-width: 3px;
}

.box.content {
  box-sizing: content-box;
  /* Width total: 123px */
}

.box.padding {
  box-sizing: padding-box;
  /* Width total: 100px */
}
                

Overflow

Atunci când setăm dimensiunile unui element, e posibil să aibă conținut care îi depășește limitele. Cu ajutorul proprietății overflow, putem spune ce vrem să se întâmple atunci.

Se poate folosi proprietatea overflow-x dacă vrem să setăm comportamentul doar pentru depășirea pe orizontală, respectiv overflow-y pentru verticală.

Display

Vorbeam în lecțiile precendete că avem două tipuri de elemente în HTML: block și inline.
Cele inline pot apărea în mijlocul textului.

O altă caracteristică a elementelor inline este că nu poți să le setezi width și height, iar marginea se poate pune doar față de restul textului (pe orizontală).

Dar avem cazuri în care vrem ca un anumit element să se comporte ca un block, deși natural este inline. Uneori poate și invers.
Un exemplu ar fi dacă vrem să facem o ancoră pe care să o dimensionăm, poate să o facem să arate ca un buton. Ancorele natural sunt elemente inline.

Pentru a schimba tipul de element folosim proprietatea display.

Valorile pe care putem să i le dăm sunt mai multe, pe unele le vom învăța în alte lecții, dar acum ne interesează doar câteva: