CSS Layout – vlastnost zobrazení

Obsah

    Zobrazit obsah

Vlastnost display je nejdůležitější vlastností CSS pro ovládání rozvržení.

Vlastnost zobrazení

Vlastnost display určuje, zda/jak je prvek zobrazen.

Každý prvek HTML má výchozí hodnotu zobrazení v závislosti na typu prvku to je. Výchozí zobrazená hodnota pro většinu prvků je blok nebo v řádku.

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).

Prvky na úrovni bloku

Prvek na úrovni bloku vždy začíná na novém řádku a zabírá celou dostupnou šířku (natáhne se doleva a doprava, jak jen to jde).

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

Příklady prvků na úrovni bloku:

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

Vložené prvky

Vložený prvek nezačíná na novém řádku a zabírá pouze nezbytnou šířku.

Toto je vložený <span> prvek uvnitř odstavce.

Příklady vložených prvků:

<span>
<a>
<img>

HTML příkaz Zobrazení: žádné;

display: none; se běžně používá ke skrytí v JavaScriptu a zobrazovat prvky bez jejich mazání a opětovného vytváření. Podívejte se na naše poslední příklad na této stránce, pokud chcete vědět, jak toho lze dosáhnout.

Prvek <script> používá display: none; jako výchozí.

Přepsat výchozí zobrazovanou hodnotu

Jak již bylo zmíněno, každý prvek má výchozí zobrazovanou hodnotu. Nicméně můžete toto přepsat.

Změna vloženého prvku na prvek bloku nebo naopak může být užitečná aby stránka vypadala specifickým způsobem a stále dodržovala webové standardy.

Běžným příkladem je vytváření vložených prvků <li> pro horizontální nabídky:

Příklad

li {
  display: inline;
}

Zkuste to sami →

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

Poznámka: Nastavení vlastnosti zobrazení prvku změní pouze způsob zobrazení prvku, NE o jaký druh prvku se jedná. Vložený prvek s display: block; tedy není povolen aby v něm byly další prvky bloku.

Následující příklad zobrazuje prvky <span> jako prvky bloku:

Příklad

span {
  display: block;
}

Zkuste to sami →

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

Následující příklad zobrazuje prvky <a> jako prvky bloku:

Příklad

a {
  display: block;
}

Zkuste to sami →

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

Skrýt prvek - zobrazení:žádné nebo viditelnost:skryté?

style="wrap">display:none

Italy

visibility:hidden

Forest

Reset

Lights

Skrytí prvku lze provést nastavením vlastnosti display na žádné. Prvek bude skrytý a stránka se zobrazí, jako by nebyl tam:

Příklad

h1.hidden {
  display: none;
}

Zkuste to sami →

<!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; také skryje prvek.

Prvek však bude zabírat stále stejný prostor jako dříve. Prvek bude skrytý, ale stále ovlivní rozvržení:

Příklad

h1.hidden {
  visibility: hidden;
}

Zkuste to sami →

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

Další příklady

Tento příklad ukazuje display: none; versus viditelnost: skrytý;

Rozdíly mezi zobrazením: žádné; a viditelnost: skrytý;

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

Tento příklad ukazuje, jak používat CSS a JavaScript k zobrazení prvku klikněte.

Použití CSS společně s JavaScriptem k zobrazení obsahu

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

Vlastnosti zobrazení/viditelnosti CSS

display

Určuje, jak má být prvek zobrazen

visibility

Určuje, zda má být prvek viditelný nebo ne