Latest web development tutorials

CSS-Anzeige (Anzeige) und Sichtbarkeit (Sichtbarkeit)

Wie ein Element Eigenschaft angezeigt wird angezeigt werden, die Sichtbarkeit Attribut gibt an, dass ein Element sichtbar oder unsichtbar sein soll.

Box 1

Box 2
Box 3

Versteckte Elemente - display: none oder Sichtbarkeit: versteckt

Ausblenden Attribut ein Element durch die Anzeige auf "none" oder die Sichtbarkeit Eigenschaft auf "versteckt". Beachten Sie jedoch, werden diese zwei Verfahren unterschiedliche Ergebnisse liefern.

Sichtbarkeit: versteckt ein Element zu verstecken, aber versteckte Element bleibt die gleiche wie vor der Besatzung und nicht Raum versteckt. Das heißt, obwohl das Element verborgen ist, aber beeinflussen noch das Layout.

Beispiele

h1.hidden {visibility:hidden;}

Versuchen »

display: none ein Element zu verstecken, und die versteckten Elemente nehmen keinen Platz. In anderen Worten, dieses Element nicht nur verborgen, und der Raum durch das ursprüngliche Element besetzt werden aus dem Seitenlayout verschwinden.

Beispiele

h1.hidden {display:none;}

Versuchen »


CSS-Anzeige - Block und Inline-Elemente

Block-Element ist ein Element, um die gesamte Breite von einem Zeilenumbruch vor und nach der Aufnahme.

Beispiele von Blockelementen:

  • <H1>
  • <P>
  • <Div>

Inline-Elemente müssen nur die notwendige Breite, erzwingt keine Zeilenumbrüche.

Beispiele für Inline-Elemente:

  • <Span>
  • <a>

Wie ein Anzeigeelement zu ändern

Sie können die Elemente Block ändern und Inline-Elemente, und umgekehrt, kann die Seite aus machen eine Kombination aus einer bestimmten Art und Weise ist, und immer noch Web-Standards folgen.

Das folgende Beispiel zeigt Listenelemente als Inline-Elemente:

Beispiele

li {display:inline;}

Versuchen »

Die folgenden Beispiel Spanne Elemente als Blockelemente:

Beispiele

span {display:block;}

Versuchen »

Hinweis: Ändern Sie die Art der Anzeigeelemente , um zu sehen , wie das Element angezeigt wird, ist es , welche Art von Elementen.Zum Beispiel: ein Inline-Element auf display: block ist nicht erlaubt, ihre eigenen internen verschachtelte Block-Elemente zu haben.


Beispiele

Weitere Beispiele

Wie Inline - Element angezeigt werden soll .

Dieses Beispiel zeigt, wie inline eines Elements anzuzeigen.

Wie ein Blockelement angezeigt werden soll .

Dieses Beispiel zeigt, wie ein Element Blockelement angezeigt werden soll.

Wie die Eigenschaft Zusammenbruch eine Tabelle zu verwenden.

Dieses Beispiel zeigt, wie die Tabelle der Zusammenbruch Eigenschaften zu verwenden.