CSS-layout - Visningsegenskapen

Innehållsförteckning

Egenskapen display är den viktigaste CSS-egenskapen för att kontrollera layouten.

Visningen Egenskap

Egenskapen display anger om/hur ett element visas.

Varje HTML-element har ett standardvisningsvärde beroende på vilken typ av element det är. Standardvisningsvärdet för de flesta element är block 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).

Element på blocknivå

Ett element på blocknivå börjar alltid på en ny linje och tar upp hela den tillgängliga bredden (sträcker ut åt vänster och höger så långt den kan).

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

Exempel på element på blocknivå:

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

Inline element

Ett inline-element börjar inte på en ny linje och tar bara upp så mycket bredd som behövs.

Detta är ett infogat <span>-element inuti ett stycke.

Exempel på inline-element:

<span>
<a>
<img>

HTML-sats `Visning: ingen;`

display: none; används ofta med JavaScript för att dölja och visa element utan att ta bort och återskapa dem. Ta en titt på vår sista exempel på denna sida om du vill veta hur detta kan uppnås.

Elementet <script> använder display: none; som standard.

Åsidosätt det förinställda visningsvärdet

Som nämnts har varje element ett standardvärde för visning. Däremot kan du åsidosätta detta.

Att ändra ett inline-element till ett blockelement, eller vice versa, kan vara användbart för få sidan att se ut på ett specifikt sätt och fortfarande följa webbstandarderna.

Ett vanligt exempel är att skapa inline ><li>-element för horisontella menyer:

Exempel

li {
  display: inline;
}

Prova själv →

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

Obs! Att ställa in visningsegenskapen för ett element ändrar bara hur elementet visas, INTE vilken typ av element det är. Så ett inline-element med display: block; är inte tillåtet att ha andra blockelement inuti den.

Följande exempel visar <span>-element som blockelement:

Exempel

span {
  display: block;
}

Prova själv →

<!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öljande exempel visar <a>-element som blockelement:

Exempel

a {
  display: block;
}

Prova själv →

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

Dölja ett element - display:none eller visibility:hidden?

style="wrap">display:none

visibility:hidden

Reset

Att dölja ett element kan göras genom att ställa in egenskapen display till ingen. Elementet kommer att döljas och sidan kommer att visas som om elementet inte är det där:

Exempel

h1.hidden {
  display: none;
}

Prova själv →

<!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; döljer också ett element.

Elementet kommer dock fortfarande att ta upp samma utrymme som förut. Elementet kommer att döljas, men påverkar fortfarande layouten:

Exempel

h1.hidden {
  visibility: hidden;
}

Prova själv →

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

Fler exempel

Detta exempel visar visning: ingen; kontra synlighet: dold;

Skillnader mellan display: ingen; och synlighet: dold;

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

Det här exemplet visar hur man använder CSS och JavaScript för att visa ett element på klick.

Använder CSS tillsammans med JavaScript för att visa innehåll

<!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-visnings-/synlighetsegenskaper

display: Anger hur ett element ska visas
visibility: Anger om ett element ska vara synligt eller inte

CSS-layout - Visningsegenskapen

Innehållsförteckning

Visningen Egenskap

Element på blocknivå

Inline element

HTML-sats Visning: ingen;

Åsidosätt det förinställda visningsvärdet

Exempel

Exempel

Exempel

Dölja ett element - display:none eller visibility:hidden?

Exempel

Exempel

Fler exempel

CSS-visnings-/synlighetsegenskaper

HTML-sats `Visning: ingen;`