Το μοντέλο κουτιού CSS εξηγείται από τη ζωή σε μια γερή προάστια γειτονιά

Αν έχετε πάει σε μια φυσιολογική προαστιακή γειτονιά, τότε μπορείτε να καταλάβετε το μοντέλο CSS Box.

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

ΟΥΑΟΥ. Αυτά είναι πολλά κιβώτια εντός κιβωτίων. Δεν νομίζω ότι θέλω να ακούσω τη λέξη "κουτί" για τουλάχιστον μία εβδομάδα. Επίσης, η ιδέα του κιβωτίου δεν κάνει καλή δουλειά για να περιγράψει τα περιθώρια και τα περιθώρια. Αυτά είναι τα δύο μεγαλύτερα εργαλεία για τη δημιουργία ομοιόμορφα διαχωρισμένων στοιχείων.

Στην πραγματικότητα, υπάρχει λίγο περισσότερη απόχρωση όταν πρόκειται για την οργάνωση στοιχείων HTML. Το μοντέλο CSS Box (gasp!) Μας επιτρέπει να δημιουργούμε ισορροπημένο και ευανάγνωστο περιεχόμενο στη σελίδα μας.

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

Αν ψάχνετε για μια πιο τεχνική εξήγηση, το MDN είναι αρκετά καλό.

Το κύριο τεμάχιο του μοντέλου πλαισίου

Υπάρχουν 5 σημαντικές ιδιότητες που σας επιτρέπουν να διαχωρίζετε και να διανέμουν τα στοιχεία HTML:

  • Πλάτος
  • Υψος
  • Υλικό παραγεμίσματος
  • Σύνορο
  • Περιθώριο

Εδώ είναι αυτό που μοιάζει με ένα διάγραμμα:

Yikes! Αυτό είναι ένα πάρα πολλά κιβώτια για ένα στοιχείο. Ας πάρουμε αυτό το ένα βήμα. Υπάρχουν στην πραγματικότητα τρεις διαφορετικές ζώνες εδώ.

Ζώνη 1: Το ύψος και το πλάτος του πραγματικού στοιχείου. Αυτό είναι το ίδιο το σπίτι. Στο διάγραμμα, αυτό είναι 679 εικονοστοιχεία με 63 εικονοστοιχεία.

Ζώνη 2: Το έδαφος γύρω από το στοιχείο που περιορίζεται από τα σύνορα. Αυτό είναι σαν την αυλή και το φράκτη στην ιδιοκτησία σας. Αυτό είναι το παραπέτασμα και τα σύνορα.

Ζώνη 3: Ο κενός χώρος που χωρίζει αυτό το στοιχείο από τα περιβάλλοντα στοιχεία. Αυτό είναι παρόμοιο με τα δέντρα που εξακολουθούν να είναι τεχνικά μέρος της περιουσίας σας, αλλά σας δίνουν κάποια προστασία της ιδιωτικής ζωής από τους γείτονες και έχουν σκοπό μόνο να σας δώσουν ένα buffer. Αυτό είναι το περιθώριο.

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

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

Ας υποθέσουμε ότι θέλετε να έχετε μια τεράστια αυλή στη δεξιά πλευρά του σπιτιού, που θα έκανε το σωστό σύνορο μακριά. Μπορείτε να το αλλάξετε με την ιδιότητα padding-right.

Η ιδιότητα περιθωρίου επηρεάζει το χώρο μεταξύ των στοιχείων. Αυτός είναι αυτός ο κενός χώρος που είναι ένα είδος «γης του ανθρώπου», όπου δεν συμβαίνει καμία εξέλιξη. Είναι αυστηρά σχεδιασμένο για την απομάκρυνση των στοιχείων. Εδώ είναι ένα ζευγάρι σπίτια στη σειρά, μερικά από τα οποία έχουν μεγαλύτερα ή μικρότερα περιθώρια.

ΣΗΜΕΙΩΣΗ: Καθένα από αυτά τα στοιβαγμένα σπίτια πρέπει να έχει μια οθόνη με τιμή "inline-block". Αποτρέπει την κατάρρευση περιθωρίων.

Μερικά πραγματικά παραδείγματα

Εντάξει, ας χρησιμοποιήσουμε κάποιο πραγματικό CSS! Φανταστείτε ότι έχετε πολλά με τα ακόλουθα χαρακτηριστικά:

Εδώ είναι αυτό που θα έμοιαζε:

Μερικές παρατηρήσεις:

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

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

Και εδώ είναι το διάγραμμα:

Αν σας αρέσει αυτή η ανάρτηση, μπορείτε επίσης να απολαύσετε τις άλλες εξηγήσεις μου σχετικά με τα θέματα CSS, JavaScript και SQL, όπως η τοποθέτηση, το μοντέλο View-Controller και οι επανάκλησεις.

Και αν νομίζετε ότι αυτό μπορεί να βοηθήσει άλλους ανθρώπους στην ίδια θέση με εσάς, δώστε την "καρδιά"!