Το μοντέλο του CSS Box εξηγείται με παραδείγματα

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

Τι είναι το CSS Box Model;

Το μοντέλο κουτιού CSS είναι ένα πρότυπο που δημιουργήθηκε από το Κοινοπραξία World Wide Web. Περιγράφει όλα τα στοιχεία σε ένα έγγραφο HTML ως ορθογώνια πλαίσια με τις δικές τους διαστάσεις. Αυτά τα πλαίσια περιέχουν μια περιοχή περιεχομένου και προαιρετικά περιθώρια περιθωρίου, περιγράμματος και περιοχές γεμίσματος. Έτσι, ας εξερευνήσουμε τα μέρη ενός πλαισίου CSS.

Ας αποκαλύψουμε τα τέσσερα επίπεδα του μοντέλου κουτιού CSS.

Πρώτο στρώμα: Περιεχόμενο

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

Δεύτερο στρώμα: Επένδυση

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

Τρίτο στρώμα: Σύνορα

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

Τέταρτο στρώμα: Περιθώριο

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

Ρύθμιση έργου για CSS Box Model

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

Δομή με HTML

Παραγωγή:

Μπορείτε να χρησιμοποιήσετε ενσωματωμένες δυνατότητες του προγράμματος περιήγησής σας, όπως το Εργαλεία προγραμματιστών Chrome, για να δούμε τι συμβαίνει. Χρησιμοποιούμε δύο εικόνες από το Unsplash. Για απλότητα, θα κρύψουμε την εικόνα του smartphone χρησιμοποιώντας οθόνη: καμία? μέχρι να το χρειαστούμε αργότερα.

Στυλ με χρήση CSS

/*************************
ΒΑΣΙΚΟ ΣΤΥΛΙΣΜΟ
*************************/
* {
περιθώριο: 0px;
επένδυση: 0px;
}
σώμα {
οθόνη: flex?
flex-direction: σειρά?
} 
.απεικόνιση {
οθόνη: καμία! σημαντική.
}

Τώρα, ας διαμορφώσουμε το πλαίσιο περιεχομένου μας. Αρχικά, θα ορίσουμε το ύψος και πλάτος της εικόνας. Επίσης, η απόδοση ενός χρώματος φόντου βοηθά στην καλύτερη απεικόνιση. Αρα ας το κάνουμε.

/*************************
ΚΟΥΤΙ ΠΕΡΙΕΧΟΜΕΝΟΥ
*************************/
.content-box {
οθόνη: flex?
flex-direction: σειρά?
justify-content: κέντρο;
ευθυγράμμιση-στοιχεία: κέντρο;
/ * Διαμόρφωση του πλαισίου περιεχομένου χρησιμοποιώντας ιδιότητες ύψους και πλάτους */
χρώμα φόντου: #fdf;
ύψος: 20em?
πλάτος: 30em?
}

Δώστε αίθουσα περιεχομένου για αναπνοή με επένδυση

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

 /*************************
ΥΛΙΚΟ ΠΑΡΑΓΕΜΙΣΜΑΤΟΣ
*************************/
/ * Εφαρμογή γεμίσματος */
επένδυση-κορυφή: 5em;
padding-right: 2em;
επένδυση-κάτω: 8em?
επένδυση-αριστερά: 2em;
/ * Σύντομη επένδυση */
/ * πάνω/δεξιά/κάτω/αριστερά */
επένδυση: 5em 2em 8em 2em?
/ * πάνω/οριζόντια/κάτω */
επένδυση: 5em 2em 8em?

Παραγωγή:

Σχεδιάστε γραμμές γύρω από την επένδυση χρησιμοποιώντας περίγραμμα

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

Μπορείτε επίσης να ρυθμίσετε το περιθώριο-ακτίνα για να δώσετε στο κουτί στρογγυλεμένες γωνίες με ακτίνα μέσα px, ρεμ, εμ, ή τοις εκατό.

 /*************************
ΣΥΝΟΡΟ
*************************/
/ * Εφαρμογή ιδιοτήτων περιγράμματος */
/ * Ορίστε το χρώμα του περιγράμματος */
περίγραμμα-χρώμα: rgb (148, 234, 255);
/ * Επιλογή στυλ περιγράμματος */
border-top-style: solid?
σύνορα-δεξιά-στυλ: διακεκομμένη?
περίγραμμα-κάτω στυλ: αυλάκι;
σύνορα-αριστερά-στυλ: κορυφογραμμή;
/ * συντομογραφία τύπου περιγράμματος */
/ * πάνω/δεξιά/κάτω/αριστερά */
περίγραμμα στυλ: στερεά διακεκομμένη αυλάκωση κορυφογραμμή?
/ * Ορισμός πλάτους περιγράμματος */
περίγραμμα-κορυφαίο πλάτος: 4em;
περίγραμμα-δεξί-πλάτος: 2em;
περίγραμμα-κάτω-πλάτος: 2em;
περίγραμμα-αριστερά-πλάτος: 2em;
/* στενογραφία πλάτους περιγράμματος*/
/ * πάνω/δεξιά/κάτω/αριστερά */
περίγραμμα-πλάτος: 4em 2em 2em 2em?
/ * πάνω/οριζόντια/κάτω */
περίγραμμα-πλάτος: 4em 2em 2em?
/ * συντομογραφία ιδιοκτησίας συνόρων */
/* περίγραμμα: 4em solid rgb (148, 234, 255); */
/ * Ορισμός ακτίνας περιγράμματος */
περιθώριο-ακτίνα: 5em;
περιθώριο-ακτίνα: 20%;

Παραγωγή:

Προσθέστε χώρο μεταξύ κουτιών με περιθώριο

Μπορείτε να κεντράρετε ένα κουτί οριζόντια χρησιμοποιώντας περιθώριο: 0 αυτόματα, με την προϋπόθεση ότι έχει συγκεκριμένο πλάτος.

 /*************************
ΠΕΡΙΘΩΡΙΟ
*************************/
/ * Εφαρμογή ιδιοτήτων περιθωρίου */
margin-top: 4em;
margin-right: 5em;
περιθώριο κάτω: 3em;
περιθώριο-αριστερά: 5em;
/ * Σύντομο περιθωρίου */
/ * πάνω/δεξιά/κάτω/αριστερά */
περιθώριο: 4em 5em 3em 5em?
/ * πάνω/οριζόντια/κάτω */
περιθώριο: 4em 5em 3em?
/ * Χρήση αυτόματου περιθωρίου */
περιθώριο: 3em auto;

Παραγωγή:

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

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

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

Δείτε επίσης: Το βασικό φύλλο εξαπατήσεων ιδιοτήτων CSS3

Έχετε χρησιμοποιήσει ποτέ αρνητικό περιθώριο; Για να το απεικονίσουμε ας το σβήσουμε οθόνη: καμία για να εμφανιστεί η δεύτερη εικόνα μας και, στη συνέχεια, ορίστε ένα αρνητικό περιθώριο.

/* .απεικόνιση {
οθόνη: καμία! σημαντική.
} */
.content-box {
οθόνη: flex?
flex-direction: σειρά?
ευθυγράμμιση-στοιχεία: κέντρο;
χρώμα φόντου: #fdf;
ύψος: 20em?
πλάτος: 30em?
επένδυση: 5em 2em 8em?
περίγραμμα στυλ: στερεά διακεκομμένη αυλάκωση κορυφογραμμή?
περίγραμμα-πλάτος: 4em 2em 2em?
περιθώριο-ακτίνα: 20%;
/ * Χρήση αρνητικού περιθωρίου */
περιθώριο: 3em -20em 3em 5em?
}

Παραγωγή:

Μοντέλο κουτιού: Δημιουργία ενός τέλειου ιστότοπου Pixel

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

Θα πρέπει να καταλάβετε ότι υπάρχουν και άλλες μέθοδοι για τη δημιουργία περιεχομένου στο CSS. Αυτά περιλαμβάνουν το CSS Grid και το CSS Flexbox. Μόλις αισθανθείτε άνετα με το μοντέλο κουτιού, θα πρέπει να συνεχίσετε να μαθαίνετε για αυτές τις εναλλακτικές λύσεις.

Εκπαιδευτικό πρόγραμμα CSS Flexbox: Τα βασικά

Τοποθετήστε τέλεια τα στοιχεία HTML με τη βοήθεια του CSS Flexbox.

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα