Διάταξη CSS - Η ιδιότητα εμφάνισης

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

Η ιδιότητα display είναι η πιο σημαντική ιδιότητα CSS για τον έλεγχο της διάταξης.

Η ιδιότητα εμφάνισης

Η ιδιότητα display καθορίζει εάν/πώς εμφανίζεται ένα στοιχείο.

Κάθε στοιχείο HTML έχει μια προεπιλεγμένη τιμή εμφάνισης ανάλογα με τον τύπο του στοιχείου είναι. Η προεπιλεγμένη τιμή εμφάνισης για τα περισσότερα στοιχεία είναι block ή ενσωμάτωση.

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

Στοιχεία σε επίπεδο μπλοκ

Ένα στοιχείο σε επίπεδο μπλοκ ξεκινά πάντα από μια νέα γραμμή και καταλαμβάνει όλο το διαθέσιμο πλάτος (εκτείνεται αριστερά και δεξιά όσο μπορεί).

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

Παραδείγματα στοιχείων σε επίπεδο μπλοκ:

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

Ενσωματωμένα στοιχεία

Ένα ενσωματωμένο στοιχείο δεν ξεκινά σε μια νέα γραμμή και καταλαμβάνει μόνο όσο πλάτος χρειάζεται.

Αυτό είναι ένα ενσωματωμένο στοιχείο <span> μέσα μια παράγραφο.

Παραδείγματα ενσωματωμένων στοιχείων:

<span>
<a>
<img>

Δήλωση HTML Εμφάνιση: καμία;

Το display: none; χρησιμοποιείται συνήθως με JavaScript για απόκρυψη και εμφανίζει στοιχεία χωρίς να τα διαγράφει και να τα δημιουργεί εκ νέου. Ρίξτε μια ματιά στο τελευταίο μας παράδειγμα σε αυτήν τη σελίδα εάν θέλετε να μάθετε πώς μπορεί να επιτευχθεί αυτό.

Το στοιχείο <script> χρησιμοποιεί display: none; ως προεπιλογή.

Παράκαμψη της προεπιλεγμένης τιμής εμφάνισης

Όπως αναφέρθηκε, κάθε στοιχείο έχει μια προεπιλεγμένη τιμή εμφάνισης. Ωστόσο, μπορείτε παρακάμψει αυτό.

Η αλλαγή ενός ενσωματωμένου στοιχείου σε στοιχείο μπλοκ ή αντίστροφα μπορεί να είναι χρήσιμη κάνοντας τη σελίδα να φαίνεται με συγκεκριμένο τρόπο και να εξακολουθεί να ακολουθεί τα πρότυπα ιστού.

Ένα συνηθισμένο παράδειγμα είναι η δημιουργία ενσωματωμένων στοιχείων <li> για οριζόντια μενού:

Παράδειγμα

li {
  display: inline;
}

Δοκιμάστε το μόνοι σας →

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

Σημείωση: Η ρύθμιση της ιδιότητας εμφάνισης ενός στοιχείου αλλάζει μόνο τον τρόπο εμφάνισης του στοιχείου, ΟΧΙ τι είδους στοιχείο είναι. Επομένως, ένα ενσωματωμένο στοιχείο με display: block; δεν επιτρέπεται να έχει άλλα στοιχεία μπλοκ μέσα σε αυτό.

Το ακόλουθο παράδειγμα εμφανίζει στοιχεία <span> ως στοιχεία μπλοκ:

Παράδειγμα

span {
  display: block;
}

Δοκιμάστε το μόνοι σας →

<!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> ως στοιχεία μπλοκ:

Παράδειγμα

a {
  display: block;
}

Δοκιμάστε το μόνοι σας →

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

Απόκρυψη στοιχείου - display:none ή visibility:hidden;

style="wrap">display:none

Italy

visibility:hidden

Forest

Reset

Lights

Η απόκρυψη ενός στοιχείου μπορεί να γίνει ορίζοντας την ιδιότητα display σε κανένα. Το στοιχείο θα είναι κρυφό και η σελίδα θα εμφανίζεται σαν να μην είναι το στοιχείο εκεί:

Παράδειγμα

h1.hidden {
  display: none;
}

Δοκιμάστε το μόνοι σας →

<!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; κρύβει επίσης ένα στοιχείο.

Ωστόσο, το στοιχείο θα εξακολουθεί να καταλαμβάνει τον ίδιο χώρο όπως και πριν. Το στοιχείο θα είναι κρυφό, αλλά εξακολουθεί να επηρεάζει τη διάταξη:

Παράδειγμα

h1.hidden {
  visibility: hidden;
}

Δοκιμάστε το μόνοι σας →

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

Περισσότερα Παραδείγματα

Αυτό το παράδειγμα δείχνει εμφάνιση: κανένα; έναντι ορατότητας: κρυφό?

Διαφορές μεταξύ οθόνης: καμία; και ορατότητα: κρυφό.

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

Αυτό το παράδειγμα δείχνει πώς να χρησιμοποιήσετε CSS και JavaScript για να εμφανίσετε ένα στοιχείο Κάντε κλικ.

Χρήση CSS μαζί με JavaScript για εμφάνιση περιεχομένου

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

display

Καθορίζει πώς πρέπει να εμφανίζεται ένα στοιχείο

visibility

Καθορίζει εάν ένα στοιχείο πρέπει να είναι ορατό ή όχι