CSS-Layout – Die display-Eigenschaft


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


Die Eigenschaft display ist die wichtigste CSS-Eigenschaft zur Steuerung des Layouts.


Die Anzeigeeigenschaft

Die Eigenschaft display gibt an, ob/wie ein Element angezeigt wird.

Jedes HTML-Element verfügt je nach Typ über einen Standardanzeigewert des Elements ist es. Der Standardanzeigewert für die meisten Elemente ist block oder inline.

Click to show panel

This panel contains a <div> element, which is hidden by default (display: none).

It is styled with CSS, and we use JavaScript to show it (change it to (display: block).


Elemente auf Blockebene

Ein Element auf Blockebene beginnt immer in einer neuen Zeile und nimmt die gesamte verfügbare Breite ein (streckt sich so weit es geht nach links und rechts aus).

The <div> element is a block-level element.

Beispiele für Elemente auf Blockebene:

<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>

Inline-Elemente

Ein Inline-Element beginnt nicht in einer neuen Zeile und nimmt nur so viel Breite wie nötig ein.

Dies ist ein ein Inline-<span>-Element innerhalb eines Absatzes.

Beispiele für Inline-Elemente:

<span>
<a>
<img>

HTML-Anweisung Display: none;

display: none; wird häufig mit JavaScript zum Ausblenden verwendet und Elemente anzeigen, ohne sie zu löschen und neu zu erstellen. Werfen Sie einen Blick auf unser letztes Beispiel auf dieser Seite, wenn Sie wissen möchten, wie dies erreicht werden kann.

Das Element <script> verwendet display: none; als Standard.



Überschreiben Sie den Standardanzeigewert

Wie bereits erwähnt, verfügt jedes Element über einen Standardanzeigewert. Sie können es jedoch tun überschreiben Sie dies.

Das Ändern eines Inline-Elements in ein Blockelement oder umgekehrt kann hilfreich sein für der Seite ein bestimmtes Aussehen verleihen und dennoch den Webstandards entsprechen.

Ein häufiges Beispiel ist die Erstellung von Inline-<li>-Elementen für horizontale Menüs:

Beispiel

li {
  display: inline;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
li {
  display: inline;
}
</style>
</head>
<body>

<p>Display a list of links as a horizontal menu:</p>

<ul>
  <li><a href="/html/default.asp" target="_blank">HTML</a></li>
  <li><a href="/css/default.asp" target="_blank">CSS</a></li>
  <li><a href="/js/default.asp" target="_blank">JavaScript</a></li>
</ul>

</body>
</html>


Hinweis: Das Festlegen der Anzeigeeigenschaft eines Elements ändert nur, wie das Element angezeigt wird. NICHT, um welche Art von Element es sich handelt. Daher ist ein Inline-Element mit display: block; nicht zulässig um andere Blockelemente darin zu haben.

Im folgenden Beispiel werden <span>-Elemente als Blockelemente angezeigt:

Beispiel

span {
  display: block;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
span {
  display: block;
}
</style>
</head>
<body>

<h1>Display span elements as block elements</h1>

<span>A display property with</span> <span>a value of "block" results in</span> <span>a line break between each span elements.</span>

</body>
</html>


Im folgenden Beispiel werden <a>-Elemente als Blockelemente angezeigt:

Beispiel

a {
  display: block;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
a {
  display: block;
}
</style>
</head>
<body>

<h1>Display links as block elements</h1>

<a href="/html/default.asp" target="_blank">HTML</a>
<a href="/css/default.asp" target="_blank">CSS</a>
<a href="/js/default.asp" target="_blank">JavaScript</a>

</body>
</html>



Ein Element ausblenden - display:none oder Visibility:hidden?

style="wrap">display:none

Italy

visibility:hidden

Forest

Reset

Lights

Sie können ein Element ausblenden, indem Sie die Eigenschaft display auf setzen keine. Das Element wird ausgeblendet und die Seite wird so angezeigt, als ob das Element nicht vorhanden wäre Dort:

Beispiel

h1.hidden {
  display: none;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
  display: none;
}
</style>
</head>
<body>

<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the h1 element with display: none; does not take up any space.</p>

</body>
</html>


visibility:hidden; verbirgt auch ein Element.

Das Element nimmt jedoch immer noch denselben Platz ein wie vorher. Das Element wird ausgeblendet, wirkt sich aber dennoch auf das Layout aus:

Beispiel

h1.hidden {
  visibility: hidden;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
  visibility: hidden;
}
</style>
</head>
<body>

<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the hidden heading still takes up space.</p>

</body>
</html>



Mehr Beispiele

Dieses Beispiel zeigt display: none; versus Sichtbarkeit: versteckt;

Unterschiede zwischen der Anzeige: keine; und Sichtbarkeit: versteckt;

<!DOCTYPE html>
<html>
<head>
<style>
.imgbox {
  float: left;
  text-align: center;
  width: 120px;
  border: 1px solid gray;
  margin: 4px;
  padding: 6px;
}

button {
  width: 100%;
}
</style>
</head>
<body>

<h3>Difference between display:none and visiblity: hidden</h3>
<p><strong>visibility:hidden</strong> hides the element, but it still takes up space in the layout.</p>
<p><strong>display:none</strong> removes the element from the document. It does not take up any space.</p>

<div class="imgbox" id="imgbox1">Box 1<br>
  <img src="img_5terre.jpg" alt="Italy" style="width:100%">
  <button onclick="removeElement()">Remove</button>
</div>

<div class="imgbox" id="imgbox2">Box 2<br>
  <img src="img_lights.jpg" alt="Lights" style="width:100%">
  <button onclick="changeVisibility()">Hide</button>
</div>

<div class="imgbox">Box 3<br>
  <img src="img_forest.jpg" alt="Forest" style="width:100%">
  <button onclick="resetElement()">Reset All</button>
</div>

<script>
function removeElement() {
  document.getElementById("imgbox1").style.display = "none";
}

function changeVisibility() {
  document.getElementById("imgbox2").style.visibility = "hidden";
}

function resetElement() {
  document.getElementById("imgbox1").style.display = "block";
  document.getElementById("imgbox2").style.visibility = "visible";
}
</script>

</body>
</html>


Dieses Beispiel zeigt, wie Sie CSS und JavaScript verwenden, um ein Element anzuzeigen klicken.

Verwendung von CSS zusammen mit JavaScript zum Anzeigen von Inhalten

<!DOCTYPE html>
<html>
<head>
<style>
#panel, .flip {
  font-size: 16px;
  padding: 10px;
  text-align: center;
  background-color: #4CAF50;
  color: white;
  border: solid 1px #a6d8a8;
  margin: auto;
}

#panel {
  display: none;
}
</style>
</head>
<body>

<p class="flip" onclick="myFunction()">Click to show panel</p>

<div id="panel">
  <p>This panel contains a div element, which is hidden by default (display: none).</p>
  <p>It is styled with CSS and we use JavaScript to show it (display: block).</p>
  <p>How it works: Notice that the p element with class="flip" has an onclick attribute attached to it. When the user clicks on the p element, a function called myFunction() is executed, which changes the style of the div with id="panel" from display:none (hidden) to display:block (visible).</p>
  <p>You will learn more about JavaScript in our JavaScript Tutorial.</p>
</div>

<script>
function myFunction() {
  document.getElementById("panel").style.display = "block";
}
</script>

</body>
</html>




CSS-Anzeige-/Sichtbarkeitseigenschaften

display

Gibt an, wie ein Element angezeigt werden soll

visibility

Gibt an, ob ein Element sichtbar sein soll oder nicht