Μέγεθος κουτιού - CSS-Κόλπα

Anonim

Η box-sizingιδιότητα στο CSS ελέγχει τον τρόπο χειρισμού του μοντέλου πλαισίου για το στοιχείο στο οποίο εφαρμόζεται.

.module ( box-sizing: border-box; )

Ένας από τους πιο συνηθισμένους τρόπους για να το χρησιμοποιήσετε είναι να το εφαρμόσετε σε όλα τα στοιχεία της σελίδας, στα οποία περιλαμβάνονται ψευδο στοιχεία:

*, *::before, *::after ( box-sizing: border-box; )

Αυτό συχνά αποκαλείται «καθολικό μέγεθος κουτιού» και είναι ένας καλός τρόπος για να εργαστείτε! Το (κυριολεκτικό) widthπου ορίζετε είναι το πλάτος που έχετε, χωρίς να χρειάζεται να κάνετε διανοητικά μαθηματικά και να διαχειριστείτε την πολυπλοκότητα που προέρχεται από πλάτη που προέρχονται από πολλές ιδιότητες. Έχουμε ακόμη μια μέρα ευαισθητοποίησης για κουτιά εδώ.

Αξίες

  • content-box: η προεπιλεγμένη. Οι τιμές πλάτους και ύψους ισχύουν μόνο για το περιεχόμενο του στοιχείου. Η επένδυση και το περίγραμμα προστίθενται στο εξωτερικό του κουτιού.
  • padding-box: Οι τιμές πλάτους και ύψους ισχύουν για το περιεχόμενο του στοιχείου και την επένδυση. Το περίγραμμα προστίθεται στο εξωτερικό του κουτιού. Προς το παρόν, μόνο ο Firefox υποστηρίζει την padding-boxτιμή.
  • border-box: Οι τιμές πλάτους και ύψους ισχύουν για το περιεχόμενο, την επένδυση και το περίγραμμα.
  • inherit: κληρονομεί το μέγεθος κουτιού του γονικού στοιχείου.

Παράδειγμα

Αυτό το παράδειγμα εικόνας συγκρίνει την προεπιλεγμένη content-box(κορυφή) με border-box(κάτω):

Η κόκκινη γραμμή μεταξύ των εικόνων αντιπροσωπεύει την τιμή πλάτους των στοιχείων. Παρατηρήστε ότι το στοιχείο με την προεπιλογή box-sizing: content-box;υπερβαίνει το δηλωμένο πλάτος κατά την προσθήκη της επένδυσης και του περιθωρίου στο εξωτερικό του πλαισίου περιεχομένου, ενώ το στοιχείο με την box-sizing: border-box;εφαρμογή ταιριάζει πλήρως στο δηλωμένο πλάτος.

Χρήση μεγέθους κουτιού

Ας υποθέσουμε ότι ορίζετε ένα στοιχείο width: 100px; padding: 20px; border: 5px solid black;. Από προεπιλογή, το πλαίσιο που προκύπτει έχει πλάτος 150 εικονοστοιχεία. Αυτό συμβαίνει επειδή το προεπιλεγμένο μοντέλο μεγέθους κουτιού είναι content-box, το οποίο εφαρμόζει το δηλωμένο πλάτος ενός στοιχείου μόνο στο περιεχόμενό του, τοποθετώντας την επένδυση και το περίγραμμα έξω από το κουτί του στοιχείου. Αυτό αυξάνει αποτελεσματικά τον χώρο που καταλαμβάνει το στοιχείο.

Εάν αλλάξετε το box-sizingνα padding-boxτο παραγέμισμα ωθείται μέσα στο κουτί του στοιχείου. Στη συνέχεια, το κουτί θα έχει πλάτος 110 εικονοστοιχεία, με 20 εικονοστοιχεία στο εσωτερικό και 10 εικονοστοιχεία περίγραμμα στο εξωτερικό. Εάν θέλετε να βάλετε το κάλυμμα και το περίγραμμα μέσα στο κουτί, μπορείτε να το χρησιμοποιήσετε border-box. Το κουτί θα είχε πλάτος 100px - τα 10px του περιγράμματος και τα 20px της επένδυσης ωθούνται και τα δύο μέσα στο κουτί του στοιχείου.

Διαδήλωση

Δείτε τη Σύγκριση στυλό των τιμών μεγέθους κουτιού από CSS-Tricks (@ css-tricks) στο CodePen

Σχετιζομαι με

  • width
  • height
  • padding
  • border

Υποστήριξη προγράμματος περιήγησης

Χρώμιο Σαφάρι Firefox ΛΥΡΙΚΗ ΣΚΗΝΗ ΙΕ Android iOS
Οποιος *† 3 * † 1 ‡ 7 * 8 * 2.1 * † Οποιος *

* padding-boxδεν υποστηρίζεται

† οι παλαιότερες εκδόσεις απαιτούν -webkitπρόθεμα (Chrome 1-9, Safari 3-5, Android 2.1-3.x)

‡ -mozΑπαιτείται πρόθεμα έως την έκδοση 28, χωρίς προεπιλογή από 29.