Σημείωμα:Στην HTML5, η σειρά με την οποία τοποθετούνται οι ετικέτες δεν παίζει τέτοιο ρόλο. Τα στοιχεία δεν χωρίζονται πλέον απλώς σε μπλοκ και ενσωματωμένα, αλλά ομαδοποιούνται ανάλογα με το νόημα και το σκοπό, αντιπροσωπεύοντας κατηγορίες περιεχομένου.

Ιδιότητα εμφάνισης CSS: αλλαγή τύπου στοιχείου

Χρησιμοποιώντας την εξαιρετικά χρήσιμη ιδιότητα εμφάνισης στο CSS, μπορείτε να κάνετε ένα στοιχείο μπλοκ να εμφανίζεται ως ενσωματωμένο στοιχείο και αντίστροφα. Προκειμένου ένα στοιχείο μπλοκ να συμπεριφέρεται σαν ενσωματωμένο στοιχείο (δηλαδή, να μην μεταφράζεται σε νέα γραμμή), πρέπει να γράψετε έναν κανόνα για αυτό:

Οθόνη: ενσωματωμένη;

Εάν θέλετε να εμφανίσετε ένα ενσωματωμένο στοιχείο ως στοιχείο μπλοκ (έτσι ώστε να υπάρχει μια αλλαγή γραμμής πριν και μετά το στοιχείο), γράψτε τα εξής:

Οθόνη: μπλοκ;

Ενέργεια (display:inline) και (display:block)

Μπορείτε επίσης να δημιουργήσετε ένα "υβριδικό" - ένα στοιχείο μπλοκ με συμπεριφορά όπως ένα στοιχείο πεζών γραμμάτων. Σε αυτήν την περίπτωση, όλα τα περιεχόμενα τέτοιων στοιχείων μπλοκ θα εμφανίζονται ως συνήθως, αλλά τα μπλοκ θα συμπεριφέρονται σαν ενσωματωμένα στοιχεία, παρατάσσονται στη μία γραμμή το ένα μετά το άλλο και τυλίγονται σε μια νέα γραμμή μόνο όταν είναι απαραίτητο. Το περιθώριο κατάρρευσης σε τέτοιες περιπτώσεις παύει να λειτουργεί. Για να μετατρέψετε ένα στοιχείο σε μπλοκ ενσωματωμένο στοιχείο, γράψτε:

Οθόνη: inline-block;

Ενέργεια (εμφάνιση: inline-block)

Περαιτέρω στο σεμινάριο:Ιδιότητα περιγράμματος CSS. Θα μάθετε πώς να προσθέτετε περιγράμματα σε στοιχεία ιστοσελίδας και ποιες προσαρμογές μπορείτε να εφαρμόσετε σε αυτά χρησιμοποιώντας Cascading Style Sheets.

Υπάρχουν δύο κύριες κατηγορίες στοιχείων HTML, που αντιστοιχούν στους τύπους περιεχομένου και τη συμπεριφορά τους στη δομή μιας ιστοσελίδας - φραγμόςΚαι ενσωματωμένα στοιχεία. Χρησιμοποιώντας στοιχεία μπλοκ μπορείτε να δημιουργήσετε τη δομή μιας ιστοσελίδας που χρησιμοποιούνται για τη μορφοποίηση θραυσμάτων κειμένου (με εξαίρεση τα στοιχεία Και ).

Η διαίρεση των στοιχείων σε μπλοκ και ενσωματωμένα στοιχεία χρησιμοποιείται στις προδιαγραφές HTML μέχρι την έκδοση 4.01. Στην HTML5, αυτές οι έννοιες αντικαθίστανται από ένα πιο σύνθετο σύνολο εννοιών στο οποίο κάθε στοιχείο HTML πρέπει να ακολουθεί κανόνες που καθορίζουν το περιεχόμενο που επιτρέπεται για αυτό.

Μοντέλο οπτικής μορφοποίησης CSS

1. Μοντέλο οπτικής μορφοποίησης

Το μοντέλο οπτικής μορφοποίησης CSS είναι ένας αλγόριθμος που επεξεργάζεται ένα έγγραφο HTML και το εμφανίζει στην οθόνη της συσκευής. Αυτό το μοντέλο μετασχηματίζει κάθε στοιχείο εγγράφου έτσι ώστε να δημιουργεί μηδέν ή περισσότερα ορθογώνια πλαίσια σύμφωνα με το μοντέλο πλαισίου CSS. Η θέση αυτών των πλαισίων στη σελίδα καθορίζεται από τους ακόλουθους παράγοντες:
— το μέγεθος του στοιχείου (λαμβάνοντας υπόψη εάν προσδιορίζονται ρητά ή όχι)·
— τύπος στοιχείου (γραμμή ή μπλοκ).
— σχήμα τοποθέτησης (κανονική ροή, τοποθετημένα ή αιωρούμενα στοιχεία).
— σχέσεις μεταξύ στοιχείων στο DOM·
— εσωτερικές διαστάσεις των εικόνων που περιέχονται·
— εξωτερικές πληροφορίες (για παράδειγμα, μεγέθη παραθύρων προγράμματος περιήγησης).

Η θέση και οι διαστάσεις του κουτιού(ων) κάθε στοιχείου υπολογίζονται σε σχέση με τις άκρες του ορθογώνιου κουτιού, το λεγόμενο "που περιέχει μπλοκ"(που περιέχει μπλοκ). Το μέγεθος του κουτιού δεν περιορίζεται από το μέγεθος του μπλοκ που περιέχει, επομένως υπό ορισμένες συνθήκες μπορεί να επεκταθεί πέρα ​​από τα όριά του.

2. Μοντέλο μπλοκ

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

Περιοχή περιεχομένουείναι το περιεχόμενο του στοιχείου, όπως κείμενο ή εικόνα.

Οδόντωσηκαθορίζεται από την ιδιότητα padding. Το padding είναι η απόσταση μεταξύ του κύριου περιεχομένου και του περιγράμματός του (πλαίσιο). Εάν ορίσετε ένα φόντο για ένα στοιχείο, θα ισχύει και για τα πεδία του στοιχείου. Η εσωτερική επένδυση δεν μπορεί να λάβει αρνητικές τιμές, σε αντίθεση με την εξωτερική επένδυση.

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

Οι τιμές συμπλήρωσης και περιθωρίου ορίζονται με την ακόλουθη σειρά: επάνω, δεξιά, κάτω και αριστερά.

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

Η συμπλήρωση, η συμπλήρωση και το περίγραμμα ενός στοιχείου είναι προαιρετικά η προεπιλεγμένη τιμή τους είναι μηδέν. Ωστόσο, ορισμένα προγράμματα περιήγησης προσθέτουν θετικές προεπιλεγμένες τιμές σε αυτές τις ιδιότητες με βάση τα φύλλα στυλ τους. Μπορείτε να διαγράψετε τα στυλ του προγράμματος περιήγησης για όλα τα στοιχεία χρησιμοποιώντας έναν γενικό επιλογέα:

* ( περιθώριο: 0, γέμιση: 0; )

3. Μπλοκ στοιχεία και μπλοκ δοχεία

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