CSS proprietate de afișare trebuie să setați tipul elementului HTML în raport cu alte elemente. Pur și simplu pune această opțiune este responsabil pentru modul în care elementul de afișare în raport cu celălalt. Deoarece poate realiza necesare „efecte speciale“.
Sintaxa CSS display
În cazul în care valoarea poate fi:
- Bloc - element de bloc (creează automat un line feed)
- Inline - element de linie (nu crea NEWLINE);
- inline-block - un derivat al inline. De asemenea, nu creează o linie nouă, dar elementul poate specifica lățimea și înălțimea;
- Lista de element - element de bloc din lista de marcaj;
- run-in - elementul stabileste ca un bloc sau construit în funcție de context;
- tabel - tabel este echivalent cu (tag-ul
), Transfer de linii;
- inline-table - un derivat al tabelului. Elementul este construit, dar fluxul său în jurul elementelor adiacente;
- tabel-legendă - crea un antet de tabel (tag-ul analogic
); - masă de celule - element de creare a celulei de masă (tag-ul analogic
); - tabel coloana - definirea coloanei element al tabelului;
- tabel rânduri - element definitoriu un rând de tabel;
- nici unul - elementul nu este afișat pe pagina, și toate celelalte elemente se comportă ca și în cazul în care nu este deloc;
- moștenesc - moștenesc de la elementul de bază;
remarcă
În mod implicit, toate elementele sunt mai mici de afișare. inlineExemple de utilizare de afișare
Exemplul №1. Utilizarea afișajului: bloc
În exemplu, am adăugat proprietate de frontieră: 1px solid # 000 pentru a arăta ceea ce regiune este un element de bloc.
Iată cum arată pe pagina:
Punctul №1. Considerăm că elementele de afișare. text pentru a afișa proprietate: bloc După cum puteți vedea, linia de transpirat automat
Exemplul №2. Utilizarea display: nici unul
Iată cum arată pe pagina:
Punctul №1. Considerăm elemente de afișare: nici unul. Text de afișare: nici unul După cum se poate vedea, blocul de text cu nici unul lipsă
Este logic să dețină asocierea cu vizibilitatea atributul: ascuns. dar, spre deosebire de el, afișare: nici unul nu dă spațiu pentru obiecte.
Această caracteristică este foarte utilă, de exemplu, crearea de efecte ale meniului drop-down.
Exemplul №3. Utilizarea display: inline-block
Iată cum arată pe pagina:
Punctul №1. Considerăm elemente. text pentru a afișa proprietate: inline-bloc După cum se poate vedea, blocul este introdus direct în conținut