Διαμόρφωση CSS - Ιδιότητα display

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

Επιχείρημα display

display ορίζει αν και πώς θα εμφανίζεται το στοιχείο.

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

Κάντε κλικ για να εμφανίσετε την επιφάνεια

Αυτή η επιφάνεια περιέχει έναν στοιχείο <div>, το οποίο είναι προεπιλεγμένα κρυμμένο. (display: none)

η διαμόρφωση του στοιχείου γίνεται με CSS, και χρησιμοποιούμε JavaScript για να το εμφανίσουμε. (Αλλαγή σε display: block)

στοιχεία μπλοκ (block element)

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

το στοιχείο <div> αυτό ανήκει στα στοιχεία μπλοκ.

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

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

γραμμικό στοιχείο (inline element)

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

αυτό είναι το κείμενο του παραδοθέντοςγραμμικό <span> στοιχείο.

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

  • <span>
  • <a>
  • <img>

Display: none;

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

προεπιλεγμένα,<script> η στοιχεία χρησιμοποιούν display: none;.

Κάλυψη της προεπιλεγμένης τιμής Display

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

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

ένας συχνός παράδειγμα είναι η δημιουργία γραμμικών <li> στοιχεία:

παράδειγμα

li {
  display: inline;
}

Δοκιμάστε το Διάθεσθε

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

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

παράδειγμα

span {
  display: block;
}

Δοκιμάστε το Διάθεσθε

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

παράδειγμα

a {
  display: block;
}

Δοκιμάστε το Διάθεσθε

Κρυφή το στοιχείο - display: none ή visibility: hidden;

display: none

visibility: hidden

Ανασύσταση

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

παράδειγμα

h1.hidden {
  display: none;
}

Δοκιμάστε το Διάθεσθε

visibility: hidden; μπορεί επίσης να κρύψει το στοιχείο.

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

παράδειγμα

h1.hidden {
  visibility: hidden;
}

Δοκιμάστε το Διάθεσθε

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

Η διαφορά μεταξύ display: none; και visibility: hidden;
Αυτό το παράδειγμα δείχνει display: none; VS visibility: hidden;
Συνδυασμός CSS και JavaScript για την εμφάνιση περιεχομένου
Αυτό το παράδειγμα δείχνει πώς να χρησιμοποιήσουμε το CSS και το JavaScript για να εμφανίσουμε στοιχεία με κλικ.

CSS Ατριβούτο Display/Visibility

Ατрибούτο Περιγραφή
display Ορίζει πώς θα εμφανίζεται το στοιχείο.
visibility Ορίζει αν το στοιχείο πρέπει να είναι ορατό.