CSS-elrendezés – A megjelenítési tulajdonság

Tartalomjegyzék

A display tulajdonság a legfontosabb CSS-tulajdonság az elrendezés szabályozásához.

A kijelző tulajdonsága

A display tulajdonság megadja, hogy egy elem megjelenjen-e/hogyan.

Minden HTML-elemnek van egy alapértelmezett megjelenítési értéke a típustól függően az elemről van szó. A legtöbb elem alapértelmezett megjelenítési értéke a blokk vagy soron belüli.

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

Blokk szintű elemek

A blokkszintű elem mindig új sorban kezdődik, és a teljes elérhető szélességet veszi fel (balra és jobbra nyúlik, amennyire csak tud).

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

Példák blokk szintű elemekre:

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

Soron belüli elemek

Egy soron belüli elem nem kezdődik új sorban, és csak akkora szélességet vesz fel, amennyire szükséges.

Ez egy soron belüli <span> elem bekezdésen belül.

Példák soron belüli elemekre:

<span>
<a>
<img>

HTML utasítás `Megjelenítés: nincs;`

A megjelenítés: nincs; gyakran használt JavaScripttel az elrejtéshez és az elemek törlése és újbóli létrehozása nélkül jeleníthetők meg. Vessen egy pillantást az utolsóra példát ezen az oldalon, ha tudni szeretné, hogyan lehet ezt elérni.

A <script> elem a következőt használja: display: none; alapértelmezettként.

Az alapértelmezett megjelenítési érték felülbírálása

Mint említettük, minden elemnek van egy alapértelmezett megjelenítési értéke. Azonban megteheti ezt felülírni.

Hasznos lehet egy soron belüli elem blokk elemre váltása, vagy fordítva sajátos megjelenést kölcsönöz az oldalnak, és továbbra is követi az internetes szabványokat.

Gyakori példa a vízszintes menük soron belüli <li> elemeinek létrehozása:

Példa

li {
  display: inline;
}

Próbálja ki Ön is →

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

Megjegyzés: Egy elem megjelenítési tulajdonságának beállítása csak az elem megjelenítési módját módosítja, NEM milyen elemről van szó. Tehát a display: block; soron belüli elem nem engedélyezett hogy más blokkelemek legyenek benne.

A következő példa a <span> elemeket blokkelemként jeleníti meg:

Példa

span {
  display: block;
}

Próbálja ki Ön is →

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

A következő példa az <a> elemeket blokkelemként jeleníti meg:

Példa

a {
  display: block;
}

Próbálja ki Ön is →

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

Elem elrejtése - display:none vagy visibility:hidden?

style="wrap">display:none

visibility:hidden

Reset

Egy elem elrejtése a display tulajdonság beállításával lehetséges nincs. Az elem el lesz rejtve, és az oldal úgy jelenik meg, mintha az elem nem lenne ott:

Példa

h1.hidden {
  display: none;
}

Próbálja ki Ön is →

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

A visibility:hidden; egy elemet is elrejt.

Az elem azonban továbbra is ugyanazt a helyet foglalja el mint azelőtt. Az elem el lesz rejtve, de továbbra is hatással lesz az elrendezésre:

Példa

h1.hidden {
  visibility: hidden;
}

Próbálja ki Ön is →

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

További példák

Ez a példa a következő megjelenítést mutatja be: none; szemben a láthatósággal: rejtett;

Kijelzők közötti különbségek: nincs; és láthatóság: rejtett;

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

Ez a példa bemutatja, hogyan lehet CSS-t és JavaScriptet használni egy elem megjelenítéséhez kattintson.

CSS és JavaScript használata a tartalom megjelenítéséhez

<!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 megjelenítési/láthatósági tulajdonságok

display: Meghatározza, hogyan kell egy elemet megjeleníteni
visibility: Meghatározza, hogy egy elem látható legyen-e vagy sem

CSS-elrendezés – A megjelenítési tulajdonság

Tartalomjegyzék

A kijelző tulajdonsága

Blokk szintű elemek

Soron belüli elemek

HTML utasítás Megjelenítés: nincs;

Az alapértelmezett megjelenítési érték felülbírálása

Példa

Példa

Példa

Elem elrejtése - display:none vagy visibility:hidden?

Példa

Példa

További példák

CSS megjelenítési/láthatósági tulajdonságok

HTML utasítás `Megjelenítés: nincs;`