Die display Eigenschaft ist die wichtigste CSS - Eigenschaft für das Layout zu steuern.
Die Anzeige der Immobilie
Die display - Eigenschaft gibt an, ob / wie ein Element angezeigt wird.
Jedes HTML-Element hat einen Wert Standardanzeige je nachdem, welche Art von Element es sich handelt. Der Standardanzeigewert für die meisten Elemente ist block oder inline .
Click-Bereich zu zeigen,
Dieses Panel enthält ein <div> Element, das standardmäßig (versteckt display: none ).
Es ist mit CSS gestylt, und wir verwenden JavaScript , es zu zeigen (ändern Sie ihn auf ( display: block ).
Block-Elemente
Ein Block-Level-Element beginnt immer auf einer neuen Zeile und nimmt die gesamte Breite erhältlich (erstreckt sich nach links und rechts soweit das möglich ist) auf.
Beispiele für Block-Elemente:
- <div>
- <h1> - <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
Inline-Elemente
Ein Inline-Element startet nicht auf einer neuen Zeile und nur so viel Breite wie nötig in Anspruch nimmt.
Dies ist ein Inline - <span> Element innerhalb eines Absatzes.
Beispiele für Inline-Elemente:
- <span>
- <a>
- <img>
Display: none;
display: none; wird häufig im Zusammenhang mit JavaScript verwendet , um Elemente zu verstecken und zeigen , ohne sie zu löschen und neu zu ihnen. Werfen Sie einen Blick auf unsere letzte Beispiel auf dieser Seite, wenn Sie wissen wollen, wie dies erreicht werden kann.
Das <script> Element verwenden display: none; als Standard.
Überschreiben Sie den Standardanzeigewert
Wie bereits erwähnt, hat jedes Element einen Wert Standardanzeige. Sie können jedoch diese außer Kraft setzen.
Ändern eines Inline-Elements zu einem Block-Element, oder umgekehrt, kann für die Herstellung der Seite suchen eine bestimmte Art und Weise nützlich sein, und immer noch die Web-Standards folgen.
Ein gängiges Beispiel macht Inline <li> Elemente für die horizontale Menüs:
 | Hinweis: Die Einstellung der Anzeigeeigenschaft eines Elements ändert sich nur , wie das Element angezeigt wird, nicht , welche Art von Element ist.Also, ein Inline - Element mit display: block; ist nicht zu haben , andere Blockelemente im Inneren erlaubt. |
|---|
Im folgenden Beispiel wird <span> Elemente als Block-Elemente:
Ausblenden eines Element - display:none oder visibility:hidden ?
Ein Element Hiding kann durch Setzen des erfolgen display - Eigenschaft auf none . Das Element wird ausgeblendet, und die Seite wird als angezeigt, wenn das Element nicht da ist:
visibility:hidden; verbirgt sich auch ein Element.
Allerdings wird das Element immer noch den gleichen Raum wie vor in Anspruch nehmen. Das Element wird ausgeblendet, aber immer noch Einfluss auf das Layout:
Mehr Beispiele
display: none; im Vergleich zu visibility: hidden;
Dieses Beispiel zeigt , display: none; im Vergleich zu visibility: hidden;
Mit CSS zusammen mit JavaScript - Inhalten zu zeigen
Dieses Beispiel zeigt, wie CSS und JavaScript verwenden, um ein Element auf Klick zu zeigen.
Testen Sie sich mit Übungen!
Übung 1 » Übung 2» Übung 3 » Übung 4»
CSS-Anzeige / Sichtbarkeit Eigenschaften
| Eigentum | Beschreibung |
|---|---|
| display | Gibt an, wie sollte ein Element angezeigt werden |
| visibility | Gibt an, ob nicht ein Element sichtbar sein soll |