Utilizarea CSS pentru a plasa elemente HTML

• Mai 6, 2024

Regulile CSS vă oferă posibilitatea de a plasa elemente HTML exact acolo unde le doriți. Puteți ajusta modul în care acestea răspund la alte elemente care stau în jurul lor sau chiar le puteți ascunde în întregime. Iată o defalcare a proprietăților de plasare CSS.

Display: Această proprietate definește modul în care este afișat un element. Setarea afișajului pe „niciunul” ascunde complet elementul, în timp ce alte valori pot schimba modul în care un element reacționează la alte proprietăți și elemente. De exemplu, div-urile sunt setate să fie afișate ca „bloc” în mod implicit, ceea ce înseamnă că acționează ca un obiect dreptunghiular, dar puteți utiliza „display: inline” pentru a forța div-ul să acționeze ca un paragraf. Sau, puteți face contrariul și puteți utiliza „display: bloc” pentru a forța un paragraf să acționeze ca un div.

Poziție: definește modul în care un element reacționează la elementele din jurul său. Elementele folosesc în mod implicit „poziție: statică”, ceea ce înseamnă că se afișează în ordine așa cum apar în codul HTML. „Poziție: relativă” înseamnă că locația statică a elementului este calculată și apoi compensată cu orice indicați în proprietățile „de sus” și „stânga”. Celelalte elemente de pagină acționează ca și cum elementul relativ ar fi încă în locația sa statică. Elementele „poziție: absolute” ignoră locația lor statică, bazându-și poziția doar pe valorile din proprietățile de sus, stânga, dreapta și de jos. În plus, alte elemente vor ignora acel element (deci dacă nu sunteți atenți puteți ajunge la unele suprapuneri dezordonate). „Poziție: fix” este similară cu „poziție: absolută”, cu excepția faptului că elementul își va ține locul chiar dacă vizitatorul dvs. derulează pagina.

Vizibilitate: decide dacă un element apare pe pagină sau nu. Diferența dintre „afișare: niciunul” și „vizibilitate: ascunsă” este că în primul caz, celelalte elemente de pagină se comportă ca și cum obiectul invizibil nu există; în cea din urmă, alte elemente vor ține un loc pentru elementul ascuns. Evident, setarea implicită este „vizibilă”.

Float: stabilește dacă un element se încadrează la stânga sau la dreapta altor elemente (sau nu se cascada deloc, ceea ce este implicit). Această proprietate este extrem de utilă pentru obținerea unor elemente relative poziționate corect. Trebuie să setați o lățime pentru orice element plutitor sau nu se va afișa corect. De asemenea, dacă utilizați float pentru un element, veți dori probabil să setați și proprietatea pentru toate elementele din jurul său.

Șterge: Această proprietate funcționează împreună cu proprietatea „float”. Decide modul în care elementul va lăsa alte elemente să plutească în jurul său - „clar: stânga” înseamnă că niciun alt element nu poate pluti în stânga sa; „clear: right” blochează partea dreaptă și „clear: ambele” înseamnă că niciun element nu poate pluti în ambele părți. Setarea implicită este „clar: niciuna” (ceea ce înseamnă că alte elemente pot pluti în ambele părți).

Instrucțiuni Video,: HTML div tag Example and Tutorial using CSS (Mai 2024).