Πώς η ιδιότητα CSS Box-sizing ελέγχει το μέγεθος των στοιχείων

Η ιδιότητα μεγέθους κουτιού CSS χρησιμοποιείται για τη ρύθμιση ή τον έλεγχο του μεγέθους οποιουδήποτε στοιχείου που δέχεται ένα widthή height. Καθορίζει τον τρόπο υπολογισμού του συνόλου widthκαι αυτού heightτου στοιχείου.

Σε αυτό το άρθρο, θα εξηγήσω πώς box-sizingμπορεί να χρησιμοποιηθεί η ιδιότητα CSS για τον έλεγχο του μεγέθους των στοιχείων.

Προαπαιτούμενα

  • Βασικές γνώσεις CSS.
  • Πρόγραμμα επεξεργασίας κώδικα.
  • Φυλλομετρητής.

Χωρίς την ιδιότητα μεγέθους πλαισίου CSS

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

Αυτό είναι πολύ περίεργο, σωστά; Γιατί γιατί κάποιος θα αποδίδει το ίδιο πλάτος και ύψος σε δύο divστοιχεία, εκτός αν θέλουν ιδανικά αυτά τα στοιχεία να είναι τα ίδια;

Συνεχίστε να διαβάζετε για να μάθετε γιατί τα δύο divστοιχεία είναι διαφορετικά; ‍ ??? ‍ ?.

Από προεπιλογή, το μοντέλο πλαισίου CSS υπολογίζει οποιοδήποτε στοιχείο δέχεται πλάτος ή ύψος σε αυτήν τη μορφή:

  • width + padding + border = αποδίδεται ή εμφανίζεται πλάτος του πλαισίου του στοιχείου.
  • ύψος + επένδυση + περίγραμμα = αποδίδεται ή εμφανίζεται το ύψος του κουτιού του στοιχείου.

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

Δεν το καταλαβαίνετε ακόμα; Κοιτάξτε το απόσπασμα κώδικα παρακάτω για να δείτε τον πραγματικό υπολογισμό.

.first-box { width: 200px; height: 100px; border: 8px solid blue; padding: 20px; background: yellow; /* Total width: 200px + (2 * 20px) + (2 * 8px) = 256px Total height: 100px + (2 * 20px) + (2 * 8px) = 156px */ } .second-box { width: 200px; height: 100px; border: 8px solid blue; background: yellow; /* Total width: 200px + (2 * 8px) = 216px Total height: 100px + (2 * 8px) = 116px */ } 

Όπως φαίνεται στο απόσπασμα κώδικα, το CSS προσθέτει το paddingκαι borderστο widthκαι heightέχει ήδη καθοριστεί. Εμφανίζει τη συνολική τιμή ως το μέγεθος του στοιχείου, αγνοώντας έτσι το πραγματικό μέγεθος που έχετε εκχωρήσει στο div.

Με την ιδιότητα CSS box-sizing

Με την box-sizingιδιότητα, η προεπιλεγμένη συμπεριφορά που εξηγείται παραπάνω μπορεί να αλλάξει.  

Χρησιμοποιώντας τον ίδιο κωδικό, ας προσθέσουμε την box-sizingιδιότητα και να την ρυθμίσουμε και να border-boxδούμε αν μπορούμε πραγματικά να ελέγξουμε το μέγεθος.

Πρέπει να έχετε παρατηρήσει ότι τα δύο divστοιχεία έχουν τώρα το ίδιο μέγεθος.

Σύνταξη

box-sizing:content-box; box-sizing:border-box; 

περιεχόμενο-κουτί

Αυτή είναι η προεπιλεγμένη συμπεριφορά της ιδιότητας μεγέθους κουτιού. content-boxδεν λαμβάνει υπόψη το widthκαι heightκαθορίζεται για ένα στοιχείο.

Δηλαδή, αν ορίσετε ένα στοιχείο widthσε 200 εικονοστοιχεία , τότε ορίστε το περίγραμμα σε 8 εικονοστοιχεία και το παραγέμισμα σε 20 εικονοστοιχεία , το μέγεθος του borderκαι paddingθα προστεθεί στο τελικό πλάτος απόδοσης. Αυτό κάνει το στοιχείο μεγαλύτερο από 200 pixel .

div{ box-sizing:content-box; width: 200px; border: 8px solid blue; padding: 20px; background: yellow; /* Total width: 200px + (2 * 20px) + (2 * 8px) = 256px*/ } 

Όπως φαίνεται στο απόσπασμα κώδικα παραπάνω, το μέγεθος αυτού του divστοιχείου αυξήθηκε αυτόματα στα 256 εικονοστοιχεία ακόμη και όταν είχε αρχικά οριστεί στα 200 εικονοστοιχεία.

περίγραμμα-κουτί

Όταν ορίζετε την box-sizingιδιότητα border-box, λέει στο πρόγραμμα περιήγησης να λογοδοτεί για οποιοδήποτε borderκαι paddingαντιστοιχεί στο πλάτος και το ύψος του στοιχείου.

Δηλαδή, αν ορίσετε ένα στοιχείο widthσε 200 εικονοστοιχεία , αυτά τα 200 εικονοστοιχεία θα περιλαμβάνουν οποιοδήποτε περίγραμμα ή επένδυση που προσθέτετε και το πλαίσιο περιεχομένου θα συρρικνωθεί για να απορροφήσει αυτό το επιπλέον πλάτος.

div{ box-sizing:border-box; width: 200px; border: 8px solid blue; padding: 20px; background: yellow; /* Total width: 200px - (2 * 20px) - (2 * 8px) = 144px*/ } 

Όπως φαίνεται στο απόσπασμα κώδικα παραπάνω, το μέγεθος αυτού του divστοιχείου έχει μειωθεί αυτόματα στα 144 εικονοστοιχεία ακόμη και όταν είχε αρχικά οριστεί στα 200 εικονοστοιχεία.

Ας συγχωνεύσουμε και τα δύο αποσπάσματα κώδικα και να δούμε ακριβώς πώς θα φαίνεται το πλαίσιο content-boxκαι border-box.

συμπέρασμα

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

Σύμφωνα με το MDN, είναι συχνά χρήσιμο να σετ box-sizingμε border-boxόταν τον έξω στοιχεία. Αυτό καθιστά την αντιμετώπιση των μεγεθών των στοιχείων πολύ πιο εύκολη και γενικά εξαλείφει μια σειρά από παγίδες που μπορείτε να σκοντάψετε ενώ σχεδιάζετε το περιεχόμενό σας.  

Από την άλλη πλευρά, όταν χρησιμοποιείτε position: relativeή position: absolute, η χρήση box-sizing: content-boxεπιτρέπει τις τιμές τοποθέτησης να είναι σχετικές με το περιεχόμενο και ανεξάρτητα από τις αλλαγές στα μεγέθη περιγράμματος και γεμίσματος. Μερικές φορές μπορεί να θέλετε αυτό.

Αυτό ήταν παιδιά! Ελπίζω ότι αυτό ήταν χρήσιμο. Εάν ναι, μοιραστείτε αυτό το άρθρο και ακολουθήστε με στο Twitter.