Κάθε στοιχείο σε μια ιστοσελίδα είναι ένα ορθογώνιο κουτί. Η ιδιότητα εμφάνισης στο CSS καθορίζει πώς συμπεριφέρεται αυτό το ορθογώνιο πλαίσιο. Υπάρχουν μόνο λίγες τιμές που χρησιμοποιούνται συνήθως:
div ( display: inline; /* Default of all elements, unless UA stylesheet overrides */ display: inline-block; /* Characteristics of block, but sits on a line */ display: block; /* UA stylesheet makes things like and block */ display: run-in; /* Not particularly well supported or common */ display: none; /* Hide */ )
Η προεπιλεγμένη τιμή για όλα τα στοιχεία είναι ενσωματωμένη. Τα περισσότερα "Φύλλα στυλ παράγοντα χρήστη" (τα προεπιλεγμένα στυλ που εφαρμόζει το πρόγραμμα περιήγησης σε όλους τους ιστότοπους) επαναφέρουν πολλά στοιχεία σε "αποκλεισμό". Ας εξετάσουμε κάθε ένα από αυτά, και στη συνέχεια να καλύψουμε μερικές από τις άλλες λιγότερο κοινές τιμές.
Στη γραμμή
Η προεπιλεγμένη τιμή για στοιχεία. Σκεφτείτε στοιχεία όπως , ή και πώς η αναδίπλωση κειμένου σε αυτά τα στοιχεία σε μια συμβολοσειρά κειμένου δεν διακόπτει τη ροή του κειμένου.
Το στοιχείο έχει κόκκινο περίγραμμα 1px. Παρατηρήστε ότι βρίσκεται σωστά ευθυγραμμισμένο με το υπόλοιπο κείμενο.
Ένα ενσωματωμένο στοιχείο θα δεχτεί περιθώριο και παραγέμισμα, αλλά το στοιχείο παραμένει ενσωματωμένο όπως μπορείτε να περιμένετε. Το περιθώριο και η επένδυση θα ωθήσουν άλλα στοιχεία μόνο οριζόντια και όχι κάθετα.
Ένα ενσωματωμένο στοιχείο δεν θα δεχτεί heightκαι width. Θα το αγνοήσει.
Ενσωματωμένο μπλοκ
Ένα στοιχείο που inline-blockείναι πολύ παρόμοιο με το inline στο ότι θα ευθυγραμμιστεί με τη φυσική ροή του κειμένου (στη «γραμμή βάσης»). Η διαφορά είναι ότι μπορείτε να ορίσετε ένα widthκαι το heightοποίο θα γίνει σεβαστό.
ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ
Ορισμένα στοιχεία ρυθμίζονται blockαπό το φύλλο στυλ του προγράμματος περιήγησης UA Συνήθως είναι τα στοιχεία δοχείο, όπως , και
. Επίσης, γράψτε "μπλοκ" όπως
και
. Τα στοιχεία επιπέδου μπλοκ δεν παραμένουν ενσωματωμένα αλλά ξεπερνούν τα. Από προεπιλογή (χωρίς ρύθμιση πλάτους) καταλαμβάνουν όσο το δυνατόν περισσότερο οριζόντιο χώρο.
Τα δύο στοιχεία με τα κόκκινα σύνορα είναι
s που είναι στοιχεία επιπέδου μπλοκ. Το στοιχείο ανάμεσά τους δεν παραμένει ενσωματωμένο επειδή τα μπλοκ αναλύονται κάτω από τα ενσωματωμένα στοιχεία.
Πέφτω πάνω
Πρώτον, αυτή η ιδιότητα δεν λειτουργεί στον Firefox. Η λέξη είναι ότι οι προδιαγραφές για αυτό δεν είναι αρκετά καλά καθορισμένες. Ωστόσο, για να αρχίσετε να το καταλαβαίνετε, είναι σαν να θέλετε ένα στοιχείο κεφαλίδας να παραμείνει ευθυγραμμισμένο με το κείμενο κάτω από αυτό. Το να αιωρείται δεν θα λειτουργήσει και τίποτα άλλο, καθώς δεν θέλετε η κεφαλίδα να είναι παιδί του στοιχείου κειμένου κάτω από αυτό, θέλετε να είναι το δικό του ανεξάρτητο στοιχείο. Στα προγράμματα περιήγησης "υποστήριξης", είναι έτσι:
Μην βασίζεστε όμως σε αυτό.
Flexbox
Η displayιδιότητα χρησιμοποιείται επίσης για νέες μεθόδους διάταξης όπως το Flexbox.
.header ( display: flex; )
Υπάρχουν μερικές παλαιότερες εκδόσεις σύνταξης flexbox, οπότε συμβουλευτείτε αυτό το άρθρο για τη σύνταξη κατά τη χρήση του flexbox με την καλύτερη υποστήριξη προγράμματος περιήγησης. Φροντίστε να δείτε αυτόν τον πλήρη οδηγό για το Flexbox.
Flow-Root
Η flow-rootτιμή εμφάνισης δημιουργεί ένα νέο "πλαίσιο μορφοποίησης μπλοκ", αλλά είναι διαφορετικά block. Ένα νέο BFC βοηθά με πράγματα όπως η εκκαθάριση πλωτήρων, η άρση της ανάγκης για hacks να το κάνουν αυτό.
.group ( display: flow-root; )
Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.
Επιφάνεια εργασίας
Χρώμιο
Firefox
ΙΕ
Ακρη
Σαφάρι
58
53
Οχι
79
13
Κινητό / Tablet
Android Chrome
Android Firefox
Android
iOS Safari
88
85
81
13.0-13.1
Πλέγμα
Η διάταξη πλέγματος θα ρυθμιστεί επίσης αρχικά από την ιδιότητα εμφάνισης
body ( display: grid; )
Ακολουθεί ο οδηγός μας σχετικά με τη διάταξη πλέγματος, η οποία περιλαμβάνει ένα γράφημα υποστήριξης προγράμματος περιήγησης.
Κανένας
Καταργεί πλήρως το στοιχείο από τη σελίδα. Λάβετε υπόψη ότι ενώ το στοιχείο βρίσκεται ακόμη στο DOM, αφαιρείται οπτικά και με οποιονδήποτε άλλο δυνατό τρόπο (δεν μπορείτε να κάνετε καρτέλα σε αυτό ή στα παιδιά του, αγνοείται από τους αναγνώστες οθόνης κ.λπ.).
Τιμές πίνακα
Υπάρχει ένα ολόκληρο σύνολο τιμών εμφάνισης που αναγκάζουν τα στοιχεία που δεν είναι πίνακες να συμπεριφέρονται σαν στοιχεία πίνακα, εάν το χρειάζεστε. Είναι σπάνιο, αλλά μερικές φορές σας επιτρέπει να είστε "πιο σημασιολογικοί" με τον κωδικό σας, ενώ χρησιμοποιείτε τις μοναδικές δυνάμεις θέσης των πινάκων.
