Die Eigenschaft display
ist die wichtigste CSS-Eigenschaft zur Steuerung des Layouts.
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
).
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).
Beispiele für Elemente auf Blockebene:
<div> <h1> - <h6> <p> <form> <header> <footer> <section>
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>
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.
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:
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:
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:
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>
style="wrap">display:none
visibility:hidden
Reset
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:
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:
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>
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>
Gibt an, wie ein Element angezeigt werden soll
Gibt an, ob ein Element sichtbar sein soll oder nicht