Proprietăți afișare HTML și vizibilitatea sunt folosite pentru a afișa sau ascunde elementele HTML. Dar atunci ce este diferența dintre ele? Pentru a înțelege acest lucru, uita-te la figura de mai jos, în cazul în care am folosit trei div elemente:
Noi folosim trei elemente div. prezentat în secțiunea 1 (in partea stanga). Inițial, toate elementele sunt afișate proprietățile de afișare div fără aplicație sau vizibilitate.
Vezi demo și codul on-line
În a doua parte a figurii arată doar div 1 și 3. Pentru vizibilitatea div 2 div specificate: ascuns. dar vom vedea în continuare spațiul ocupat de elementul.
Vezi demo și codul on-line
A treia secțiune, de asemenea, afișează doar div div 1 și 3. în timp ce div 2 este ascunsă folosind proprietățile de afișare HTML nici unul. Puteți vedea diferența: div 3 se mișcă în sus și div 2 este spațiu nu mai este alocat.
Vezi demo și codul on-line
Sintaxa de proprietate vizibilitate CSS
Iată cum să utilizeze proprietatea de vizibilitate CSS:
Valoarea implicită pentru proprietățile de vizibilitate CSS - vizibile. Puteți utiliza, de asemenea:
Această valoare este folosită în HTML-tabele.
Sintaxa proprietății de afișare CSS
Acest lucru permite elementul de acoperire este setat la o valoare a bunului. Asta e, am aplicat pentru secțiunea 3, în exemplul de mai sus.
funcția de afișare a HTML este, de asemenea, folosit pentru a schimba comportamentul elementelor de linie sau la nivel de bloc:
Acest cod stabilește elementul comportamentul bloc al liniei. De exemplu, div este un element bloc. Aplicarea display: inline. avem nevoie pentru a seta comportamentul elementului rând:
Înțeles bloc face exact opusul. De exemplu, un membru interval este cu litere mici. Dacă am aplica display: block. se va comporta ca un element de nivel bloc.
Exemplu de aplicare pentru a afișa proprietățile de afișare a meniului ascunderea /
Am folosit div elementul. care conține o listă cu marcatori
- , elementele de listă și hyperlink-uri. Link-uri sunt elementele de meniu.
- Cu elementul div părinte conturat cadru negru și se întinde pe toată lățimea disponibilă;
- interval conturat cadru albastru, în interiorul div ea ocupă doar spațiul necesar pentru a afișa începe cu aceeași linie;
- Punctul, care este conturat de un cadru roșu, și ia tot spațiul disponibil, și începe o nouă linie.
Pentru dezvoltarea meniului a fost folosit un număr de alte proprietăți CSS. proprietate de afișare stabilit inițial nu a fost. Acest lucru înseamnă că meniul va fi afișat.
Când faceți clic pe link-ul pentru a ascunde evenimentul prin meniul click utilizează codul JQuery. de a utiliza display: none la div elementul părinte:
Vezi demo și codul on-line
div Parental cuprinde un meniu, care este o combinație de elemente ul. și li . Dacă utilizați afișare: nici unul element de div vor fi ascunse, precum și toate meniurile. Cand meniul dispare, link-urile sunt deplasate în sus, care ocupă spațiul meniului, pentru că atunci când utilizați HTML afișare niciunul element care să aplice proprietatea nu va mai ocupa spațiul alocat pentru el.
Dacă apoi faceți clic pe link-ul pentru a afișa meniul, codul jQuery se va adăuga o valoare de afișare: inițială. Acest lucru va face meniurile vizibile, și link-uri va fi deplasat în jos.
Meniu versiune demo, folosind proprietatea de vizibilitate
Eu folosesc același exemplu ca mai sus, dar de data aceasta va aplica proprietatea de vizibilitate CSS. pentru a afișa și ascunde meniul. Diferența este în codul jQuery utilizat:
Când faceți clic pe un link pentru a ascunde meniul, meniul dispare. Când faceți clic pe link-ul pentru a afișa meniul, a adăugat proprietăți de vizibilitate: vizibil. iar meniul este afișat din nou:
Vezi demo și codul on-line
Un exemplu de utilizare a proprietății vizibilitate CSS pentru HTML-tabel
În exemplul următor vom crea un tabel HTML folosind cadru Bootstrap. Tabelul conține cinci rânduri care au afișat inițial. În această etapă, tabelul este după cum urmează:
Vezi demo și codul on-line
Pentru tabelul rânduri folosesc clase diferite pentru a specifica stilurile lor. De exemplu, un pericol. activă. avertizare, etc. rânduri de masă sunt numerotate de la 1 la 5 (prima coloana din stânga).
Acum am folosi proprietatea de vizibilitate pentru al doilea rând să-l ascundă. Acest lucru se face după cum urmează:
Astfel, valoarea de colaps este, de asemenea, utilizat pentru elementele de masă. Este folosit pentru linia de îndepărtare, în care structura de masă nu este schimbat. Uită-te la figura de mai jos și la codul versiunii demo:
Vezi demo și codul on-line
A doua linie nu este vizibil, dar structura de masă rămâne neschimbată. Dacă utilizați o valoare pentru prăbușirea orice alte elemente, acesta va funcționa, ca valoare ascunsă.
Utilizați proprietățile de afișare CSS în tabelul
Acum, același exemplu, cu excepția faptului că voi folosi HTML de proprietate de afișare. pentru a ascunde șirul în tabel:
Vezi demo și codul on-line
A doua linie a dispărut, iar al treilea rând este mutat până să ia locul.
Utilizarea afișajului pentru elementele rând
proprietate de afișare CSS este, de asemenea, folosit pentru a schimba comportamentul elementelor de linie și bloc.
Permiteți-mi să vă reamintesc că elementele bloc iau tot spațiul disponibil și să înceapă o nouă linie. De exemplu, punctele sau blocuri div - este elemente de nivel bloc.
Elementele inline ocupă doar spațiul necesar pentru a afișa și nu începe o nouă linie. Ca exemple ale elementelor de linie pot fi reduse deschidere. link-uri tag-ul, etc.
HTML proprietate de afișare vă permite să modificați comportamentul elementelor de linie și bloc.
Pentru a schimba comportamentul elementelor blocului asupra comportamentului liniei:
Pentru a schimba comportamentul elementului rând în comportamentul blocului:
În exemplul următor, comportamentul elementului etalon modifică comportamentul unui element al blocului. Un comportament prin punctul de proprietate de afișare CSS modifică comportamentul elementului liniei.
Pentru a înțelege ce diferenta este, mai întâi la figura de mai jos și codul sursă, care nu se aplică încă de proprietate de afișare HTML:
Vezi demo și codul on-line
Pe pagina, versiunea demo afișează div părinte. și în interiorul deschiderii si paragraf. Inițial, comportamentul lor este standardul pentru aceste elemente:Acum, cu ajutorul blocului de afișare HTML am schimba comportamentul SPAN comportamentul unui element al blocului, iar comportamentul paragrafului privind comportamentul liniei. Cu elementul div părinte rămâne neschimbată. A se vedea rezultatul și versiunea demo:
Vezi demo și codul on-line
Durata începe pe o linie nouă și punctul limite se încheie în cazul în care se termină textul. Ea nu ia toată lățimea disponibilă ca div sau interval.
Traducerea articolului «afișaj CSS și vizibilitate: 6 exemple pentru a arăta elemente HTML / ascundere» a fost pregătit de o echipă de proiect prietenos Web design de la A la Z.