Învaţă HTML #frontend într-un weekend
Instrucţiunile CSS
display şi position
Instrucţiunea display
Elementele HTML au câteva moduri de afişare (display). În acest tutorial mă voi opri doar asupra următoarelor trei:
- display: inline,
- display: block,
- display: flex
Diferenţa dintre ele este dată de spaţiul pe care îl ocupă în pagină.
Display inline
Elementele afişate inline nu se întind mai mult decât conţinutul lor.
Cel mai bun exemplu este eticheta cu care se creează link-urile între paginile HTML.
Eticheta <a></a> - care creează link-ul, nu are un spaţiu al ei, nu se extinde mai mult decât textul nici pe înălţime, nici în lungime şi nu afectează alinierea acestuia în raport cu restul textului.
Display block
Elementele afişate block - în schimb - în mod implicit, se extind pe toată lăţimea elementului părinte şi nu acceptă alte elemente pe aceeaşi linie cum se vede în exemplul de mai jos.
block ia lăţimea părintelui.
width: 50%), elementul block nu acceptă alte elemente pe aceeaşi linie.
block cu lăţimea de 300 pixeli (width: 300px).
Acelaşi exemplu pe CodePen cu posibilitatea editării setărilor CSS.
Asupra elementelor block pot fi aplicate şi instrucţiunile care compun aşa numitul "box model" şi care determină spaţiul ocupat în pagină de elementul respectiv:
- width: 100% - lăţimea elementului - determinată şi de instrucţiunea box-sizing,
- height: 150px - înălţimea elementului - determinată şi de instrucţiunea box-sizing,
- margin: 10px - distanţa între element şi vecinii acestuia,
- padding: 5px - spaţiul dintre border şi conţinutul elementelor,
- border: 5px - linie care înconjoară conţinutul elementului,
- box-sizing: content-box | border-box | inherit - defineşte care dintre dimensiunile box model-ului sunt incluse în instrucţiunile width / height . Pentru valoarea content-box instrucţiunile width / height vor defini lăţimea/înălţimea conţinutului. Pentru valoarea border-box instrucţiunile width / height vor defini suprafaţa totală ocupată de lăţimea/înălţimea conţinutului şi spaţiile definite cu instrucţiunile padding şi border (din lăţime/înălţime for fi scăzute ultimele două, iar ce rămâne reprezintă zona de conţinut).
width: 600px; - lăţime 600 pixeliheight: 250px; - înălţime 250 pixelimargin: 5px; - 5 pixeli distanţa faţă de elementele învecinatepadding: 15px; - 15 pixeli distanţă între bordură şi conţinutborder: 2px; grosimea bordurii 2 pixelibox-sizing: content-box; dimensiunea setată cu instrucţiunea width: include doar zona de conţinut.
width: 600px; - lăţime 600 pixeliheight: 250px; - înălţime 250 pixelimargin: 5px; - 5 pixeli distanţa faţă de elementele învecinatepadding: 15px; - 15 pixeli distanţă între bordură şi conţinutborder: 2px; grosimea bordurii 2 pixelibox-sizing: border-box; dimensiunea setată cu instrucţiunea width: include zona de conţinut şi spaţiile setate cu padding şi border
Acelaşi exemplu pe CodePen cu posibilitatea editării setărilor CSS.
Display flex
Elementele afisate cu display: flex; permit elementelor block descendente să fie afişate alăturat intr-un mod flexibil. Reluăm exemplul de la display: block şi modificăm:
- la părinte: display: flex;
Efectul este alinierea elementelor descendente pe aceeaşi linie.
block ia lăţimea părintelui.
width: 50%), elementul block nu acceptă alte elemente pe aceeaşi linie.
block cu lăţimea de 300 pixeli (width: 300px).
Mai jos lăţimea descendenţilor este limitată la width: 20%;.
block ia lăţimea părintelui.
width: 50%), elementul block nu acceptă alte elemente pe aceeaşi linie.
block cu lăţimea de 300 pixeli (width: 300px).
Elementele descendente pot avea prioritate la alocarea spaţiului cu instrucţiunea flex-grow: 0;. Numărul (zero e valoarea implicită) reprezintă un indicator de proporţie (dacă toate elementele au valoarea 1, toate vor avea aceeaşi dimensiune, dacă unul dintre ele are valoarea flex-grow: 2;, acesta va ocupa un spaţiu dublu faţă de celelalte).
block ia lăţimea părintelui.
width: 50%), elementul block nu acceptă alte elemente pe aceeaşi linie.
block cu lăţimea de 300 pixeli (width: 300px).
Alinierea şi spaţierea dintre elementele descendente pote fi controlată cu justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;.
Instrucţiunea se aplică elementului părinte. Mai jos sunt exemplele.
justify-content: flex-start;
block ia lăţimea părintelui.
width: 50%), elementul block nu acceptă alte elemente pe aceeaşi linie.
block cu lăţimea de 300 pixeli (width: 300px).
justify-content: flex-end;
block ia lăţimea părintelui.
width: 50%), elementul block nu acceptă alte elemente pe aceeaşi linie.
block cu lăţimea de 300 pixeli (width: 300px).
justify-content: center;
block ia lăţimea părintelui.
width: 50%), elementul block nu acceptă alte elemente pe aceeaşi linie.
block cu lăţimea de 300 pixeli (width: 300px).
justify-content: space-between;
block ia lăţimea părintelui.
width: 50%), elementul block nu acceptă alte elemente pe aceeaşi linie.
block cu lăţimea de 300 pixeli (width: 300px).
justify-content: space-around;
block ia lăţimea părintelui.
width: 50%), elementul block nu acceptă alte elemente pe aceeaşi linie.
block cu lăţimea de 300 pixeli (width: 300px).
justify-content: space-evenly;
block ia lăţimea părintelui.
width: 50%), elementul block nu acceptă alte elemente pe aceeaşi linie.
block cu lăţimea de 300 pixeli (width: 300px).
Puteţi exersa pe exemplul de pe CodePen.
Instrucţiunea position
Instrucţiunea CSS position: static | relative | absolute | fixed | sticky permite poziţionarea foarte precisă a elementelor în pagină. Poziţionarea efectivă se setează cu ajutorul instrucţiunilor left: 0px; şi top: 0px; care deplasează elementul orizontal/vertical dacă poziţionarea are alta valoare decât static.
Elementele poziţionate fixed şi absolute sunt scoase din alinierea şi spaţierea normală. Nu li se mai alocă spaţiu în suprafaţa ocupată de elementul părinte.
Valoarea static este implicită.
Valoarea relative permite deplasarea elementului - faţă de poziţia normală.
Exemplificare position: relative pe CodePen.
Valoarea absolute permite poziţionarea elementului faţă de colţul stânga sus al paginii sau al primului părinte cu poziţionare relativă (position: relative).
Exemplificare position: absolute pe CodePen.
Valoarea fixed permite poziţionarea elementului faţă de colţul stânga sus al ferestrei şi păstrează poziţia indiferent de poziţia documentului (indiferent de scroll).
Exemplificare position: fixed pe CodePen.
Valoarea sticky determină elementul să rămână în zona specificată cu top şi left fără a ieşi din suprafaţa părintelui.
Exemplificare position: sticky pe CodePen - scroll în exemplu pentru a vedea efectul sticky.
