Curs css

Cursul CSS. Lecția 39. Vizibilitatea elementelor. Vizibilitatea: și afișarea: proprietăți.

Cursul CSS. Lecția 39. Vizibilitatea elementelor.
Vizibilitatea: și afișarea: proprietăți.

Pentru a face elementul invizibil, folosiți proprietățile de vizibilitate (în formă: vizibilitate: ascuns;) și afișați (în această formă: afișare: nici una;).

Rețineți că aceste două posibilități oferă rezultate diferite.

vizibilitate: ascuns; - (vizibilitate: ascunsă) elementul va fi ascuns, dar va ocupa încă același loc ca înainte.

afișare: niciunul; - (afișare: nu;) elementul va fi ascuns, dar acum NU va ocupa același loc. Pagina va fi afișată, ca și cum acest element nu este deloc.

Să luăm în considerare ambele posibilități pe exemple.

Exemplul 1. vizibilitate: ascuns;

Dacă faceți clic pe butonul din partea dreaptă, se adaugă proprietatea de vizibilitate: ascunsă;
Faceți clic pe acest buton acum.

Acesta este un text într-o diva mare, pentru a arăta fluxul în jurul acestui text al unei diva mica. Când faceți clic pe buton, observați cum se schimbă aspectul acestui text (și se schimbă deloc).

Exemplul 2. afișare: niciuna;

Apăsând butonul din partea dreaptă se adaugă afișajul: nici o proprietate;
Faceți clic pe acest buton acum.

Acum să trecem la teorie.

Proprietatea de vizibilitate poate avea două semnificații:

vizibilitate: vizibil; - vizibilitatea este activată, aceasta este valoarea implicită.
vizibilitate: ascuns; - vizibilitate Dezactivată, elementul este ascuns, vezi exemplul 1 de mai sus, cum funcționează această proprietate.

În ceea ce privește proprietatea afișajului. există mai multe valori posibile aici. Să le analizăm în tabelul de mai jos.

Valorile posibile pentru proprietatea de afișare sunt:

Implicit. Afișează un element ca inline (ca ).
Implicit. Afișează un element ca element inline (cum ar fi )

Afișează un element ca bloc (ca

).
Afișează un element ca element de bloc (cum ar fi

)

Afișează elementul ca un container la nivel de bloc de nivel inline. Interiorul blocului este formatat ca o zonă dreptunghiulară a nivelului blocului. Elementul în sine este formatat ca o zonă dreptunghiulară a nivelului inline.
Afișează un element ca container de bloc în linie. Interiorul acestui bloc este formatat ca o cutie in linie.

Afișează elementul ca un tabel inline.
Elementul este afișat ca un tabel la nivel în linie.