Mai multe "Try it Yourself" - "Try it Yourself" exemplele de mai jos.
Definiție și utilizare
Proprietatea de afișare specifică tipul de cutie utilizat pentru un element HTML.
| Valoare implicită: | inline |
|---|---|
| Mostenit: | no |
| Animatable: | no. Read about animatable |
| Versiune: | CSS1 |
| sintaxa JavaScript: | object .style.display="none" Try it |
Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin proprietatea.
| Proprietate | |||||
|---|---|---|---|---|---|
| display | 4 | 8 Parțială de 5,5 | 3.0 | 3.1 | 7 |
Note: Valorile "inline-table" , "table" , "table-caption" , "table-cell" , "table-column" , "table-column-group" , "table-row" și "table-row-group" nu sunt acceptate în IE7 și mai devreme. IE8 necesită un DOCTYPE!. IE9 susține valorile.
Notă: Valorile "flex" și "inline-flex" necesită un prefix pentru a lucra în Safari. Pentru "flex" folosiți "display: -webkit-flex" , pentru "inline-flex" folosi "display: -webkit-inline-flex;" .
CSS Sintaxa
display: Valori de proprietate Valoare Descriere Joaca-l inline Valoare implicită. Afișează un element ca element inline (like <span>) Joaca - l » block Afișează un element ca un element de bloc (like <p>) Joaca - l » flex Afișează un element ca un container flexibil nivel bloc. Nou în CSS3 inline-block Afișează un element ca un container bloc de nivel inline. Interiorul acestui bloc este formatat ca cutie nivel bloc, iar elementul în sine este formatat ca o cutie de nivel inline inline-flex Afișează un element ca un container flexibil la nivel de linie. Nou în CSS3 inline-table Elementul este afișat ca un tabel de nivel inline list-item Lăsați elementul să se comporte ca un <li> elementul Joaca - l » run-in Afișează un element fie ca bloc sau inline, în funcție de context table Lăsați elementul să se comporte ca un <table> elementul table-caption Lăsați elementul să se comporte ca un <caption> elementul
table-column-group Lăsați elementul să se comporte ca un <colgroup> Element table-header-group Lăsați elementul să se comporte ca un <thead> Element table-footer-group Lăsați elementul să se comporte ca un <tfoot> Element table-row-group Lăsați elementul să se comporte ca un <tbody> Element table-cell Lăsați elementul să se comporte ca un <td> Element table-column Lăsați elementul să se comporte ca un <col> element de table-row Lăsați elementul să se comporte ca un <tr> elementul none Elementul nu va fi afișat deloc (has no effect on layout) un (has no effect on layout) Joaca - l » initial Setează această proprietate la valoarea implicită. Citiți despre inițială Joaca - l » inherit Mosteneste această proprietate de la elementul părinte. Citiți despre moștenesc
Mai multe exemple
Exemplu
O demonstrație a modului de utilizare a valorii proprietății moștenim:
body {
display: inline;
}
p {
display: inherit;
} Încearcă - l singur »
Exemplu
Setați direcția unor elemente flexibile în interiorul unui <div> Element în ordine inversă:
div {
display: -webkit-flex; /* Safari */
-webkit-flex-direction: row-reverse; /* Safari 6.1+ */
display: flex;
flex-direction: row-reverse;
} Încearcă - l singur »
Pagini similare
Tutorial CSS: CSS de afișare și vizibilitate
HTML DOM de referință: display property de display property