display Proprietatea este cea mai importantă proprietate CSS pentru a controla aspectul.
Proprietatea de afișare
display proprietate specifică dacă / modul în care este afișat un element.
Fiecare element HTML are o valoare de afișare implicită în funcție de ce tip de element de este. Valoarea de afișare implicită pentru majoritatea elementelor este block sau inline .
Faceți clic pentru a afișa panoul
Acest panou conține un <div> element care este ascuns în mod implicit ( display: none ) .
Acesta este aranjat cu CSS și folosim JavaScript pentru a arăta (change it to ( display: block ) - (change it to ( display: block ) .
Elementele de nivel bloc
Un element de nivel bloc începe întotdeauna pe o linie nouă și preia întreaga lățime disponibilă (stretches out to the left and right as far as it can) se (stretches out to the left and right as far as it can) la (stretches out to the left and right as far as it can) care (stretches out to the left and right as far as it can) .
Exemple de elemente de nivel bloc:
- <div>
- <h1> - <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
inline Elemente
Un element inline nu pornește pe o linie nouă și durează doar până la fel de mult lățime cât este necesar.
Aceasta este o linie <span> elementul în interiorul unui paragraf.
Exemple de elemente inline:
- <span>
- <a>
- <img>
Display: none;
display: none; este frecvent utilizat cu JavaScript pentru a ascunde și afișa elemente fără a șterge și recrearea-le. Uitați-vă la ultimul nostru exemplu, pe această pagină dacă doriți să știți cum acest lucru poate fi realizat.
<script> utilizare element de display: none; ca default.
Override Display Valoarea implicită
După cum sa menționat, fiecare element are o valoare implicită de afișare. Cu toate acestea, puteți trece peste acest lucru.
Modificarea unui element de linie la un element de bloc, sau invers, poate fi util pentru a face pagina arate un anumit mod, și încă să respecte standardele web.
Un exemplu comun este de a face inline <li> elemente pentru meniuri orizontale:
Note: Setarea proprietății de afișare a unui element schimbă doar modul în care este afișat elementul, nu ce fel de element de este. Deci, un element inline cu display: block; nu este permis să aibă alte elemente ale blocului în interiorul acestuia.
Următoarele exemple afișează <span> elemente ca elemente ale blocului:
Ascunde un Element - display:none sau visibility:hidden ?
Ascunderea unui element se poate face prin setarea de display proprietatea none . Elementul va fi ascuns, iar pagina va fi afișat ca în cazul în care elementul nu este acolo:
visibility:hidden; ascunde, de asemenea, un element.
Cu toate acestea, elementul va lua în continuare în sus același spațiu ca și înainte. Elementul va fi ascuns, dar încă afectează aspectul:
Mai multe exemple
display: none; versus visibility: hidden;
Acest exemplu demonstrează display: none; versus visibility: hidden;
Utilizarea CSS împreună cu JavaScript pentru a afișa conținut
Acest exemplu demonstrează modul de utilizare a CSS și JavaScript pentru a afișa un element pe clic.
Testați-te cu exerciții!
Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4»
CSS Display / Vizibilitate Proprietăți
| Proprietate | Descriere |
|---|---|
| display | Specifică modul în care ar trebui să fie afișat un element |
| visibility | Specifică dacă este sau nu un element ar trebui să fie vizibil |