CSS-layout - Visningsegenskaben

Indholdsfortegnelse

Egenskaben display er den vigtigste CSS-egenskab til styring af layout.

Visningen Ejendom

Egenskaben display angiver, om/hvordan et element vises.

Hvert HTML-element har en standardvisningsværdi afhængigt af hvilken type af element det er. Standardvisningsværdien for de fleste elementer er blok eller 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).

Elementer på blokniveau

Et element på blokniveau starter altid på en ny linje og fylder hele den tilgængelige bredde (strækker ud til venstre og højre så langt det kan).

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

Eksempler på elementer på blokniveau:

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

Inline elementer

Et inline-element starter ikke på en ny linje og fylder kun så meget bredde som nødvendigt.

Dette er et indbygget <span>-element inde i et afsnit.

Eksempler på inline-elementer:

<span>
<a>
<img>

HTML-sætning `Vis: ingen;`

display: none; bruges ofte sammen med JavaScript til at skjule og vis elementer uden at slette og genskabe dem. Tag et kig på vores sidste eksempel på denne side, hvis du vil vide, hvordan dette kan opnås.

Elementet <script> bruger display: none; som standard.

Tilsidesæt standardvisningsværdien

Som nævnt har hvert element en standardvisningsværdi. Det kan du dog tilsidesætte dette.

Det kan være nyttigt at ændre et inline-element til et blokelement eller omvendt få siden til at se ud på en bestemt måde og stadig følge webstandarderne.

Et almindeligt eksempel er at lave indlejrede ><li>-elementer til vandrette menuer:

Eksempel

li {
  display: inline;
}

Prøv det selv →

<!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>

Bemærk: Indstilling af visningsegenskaben for et element ændrer kun hvordan elementet vises, IKKE hvilken slags element det er. Så et inline-element med display: block; er ikke tilladt at have andre blokelementer indeni.

Følgende eksempel viser <span>-elementer som blokelementer:

Eksempel

span {
  display: block;
}

Prøv det selv →

<!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>

Følgende eksempel viser <a>-elementer som blokelementer:

Eksempel

a {
  display: block;
}

Prøv det selv →

<!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>

Skjul et element - display:none eller visibility:hidden?

style="wrap">display:none

visibility:hidden

Reset

Du kan skjule et element ved at indstille egenskaben display til ingen. Elementet vil blive skjult, og siden vil blive vist, som om elementet ikke er det der:

Eksempel

h1.hidden {
  display: none;
}

Prøv det selv →

<!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; skjuler også et element.

Elementet vil dog stadig optage den samme plads som før. Elementet vil være skjult, men påvirker stadig layoutet:

Eksempel

h1.hidden {
  visibility: hidden;
}

Prøv det selv →

<!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>

Flere eksempler

Dette eksempel viser visning: ingen; versus synlighed: skjult;

Forskelle mellem display: ingen; og synlighed: skjult;

<!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>

Dette eksempel viser, hvordan man bruger CSS og JavaScript til at vise et element på klik.

Brug af CSS sammen med JavaScript til at vise indhold

<!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>

Egenskaber for CSS Display/Synlighed

display: Angiver, hvordan et element skal vises
visibility: Angiver om et element skal være synligt eller ej

CSS-layout - Visningsegenskaben

Indholdsfortegnelse

Visningen Ejendom

Elementer på blokniveau

Inline elementer

HTML-sætning Vis: ingen;

Tilsidesæt standardvisningsværdien

Eksempel

Eksempel

Eksempel

Skjul et element - display:none eller visibility:hidden?

Eksempel

Eksempel

Flere eksempler

Egenskaber for CSS Display/Synlighed

HTML-sætning `Vis: ingen;`