CSS Box Sizing

CSS Box Sizing

Προτεινόμενα μαθήματα: box-sizing CSS

Αιρεσιμότητα που επιτρέπει στο σύνολο του πλάτους και του ύψους του στοιχείου να περιλαμβάνει τα εσωτερικά περιθώρια (πληρώματα).

Αν δεν καθοριστεί η ιδιότητα CSS box-sizing

  • Με την προεπιλογή, το πλάτος και το ύψος του στοιχείου υπολογίζονται ως εξής:
  • width + padding + border = το πραγματικό πλάτος του στοιχείου

height + padding + border = το πραγματικό ύψος του στοιχείου

Αυτό σημαίνει: Όταν ρυθμίζετε το πλάτος/ύψος ενός στοιχείου, το στοιχείο συνήθως φαίνεται μεγαλύτερο από αυτό που ρυθμίσατε (π protože τα κατώφλια και τα εσωτερικά περιθώρια προστίθενται στο καθορισμένο πλάτος/ύψος του στοιχείου).

Η επόμενη εικόνα δείχνει δύο <div> στοιχεία με την ίδια καθορισμένη διάσταση και ύψος:
Αυτή η div είναι μικρότερη
（πλάτος 300px, ύψος 100px）。
Αυτή η div είναι μεγαλύτερη

（πλάτος επίσης 300px, ύψος 100px）。

Παράδειγμα

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue; 
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}

Δοκιμάστε το Εξολοκλήρου

box-sizing Οι δύο <div> στοιχεία στις τελικές επιλογές εμφανίζονται με διαφορετικά μεγέθη (επειδή η div2 καθορίζει τα εσωτερικά περιθώρια):

Επιλύει αυτό το πρόβλημα.

box-sizing Αν χρησιμοποιήσετε την ιδιότητα CSS box-sizing

Αιρεσιμότητα που επιτρέπει στο σύνολο του πλάτους και του ύψους του στοιχείου να περιλαμβάνει τα εσωτερικά περιθώρια και τα κατώφλια. box-sizing: border-box;Αν ρυθμίσετε τα πλάτος και το ύψος ενός στοιχείου

Τώρα οι δύο div έχουν την ίδια μέγεθος!
Χαίρετε!

Αυτό το παράδειγμα είναι το ίδιο με το προηγούμενο, και τα δύο <div> στοιχεία έχουν ρυθμίσει box-sizing: border-box;：

Παράδειγμα

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

Δοκιμάστε το Εξολοκλήρου

Γιατί χρησιμοποιείται box-sizing: border-box; με τόσο καλά αποτελέσματα, πολλοί προγραμματιστές επιθυμούν να λειτουργούν όλα τα στοιχεία στη σελίδα με αυτόν τον τρόπο.

Το παρακάτω κώδικας διασφαλίζει ότι όλα τα στοιχεία προσαρμόζονται με αυτόν τον πιο ενσυναίσθητο τρόπο. Πολλοί browser χρησιμοποιούν αυτή τη λειτουργία για πολλούς στοιχεία φόρμας box-sizing: border-box;Παρόλο που όχι όλες - αυτό είναι το λόγο που input και textarea φαίνονται διαφορετικά όταν width: 100%;

Η εφαρμογή του σε όλα τα στοιχεία είναι ασφαλής και σοφής:

Παράδειγμα

* {
  box-sizing: border-box;
}

Δοκιμάστε το Εξολοκλήρου

Χαρακτηριστικό Box Sizing CSS

Χαρακτηριστικό Περιγραφή
box-sizing Ορίζει τον τρόπο υπολογισμού της πλάθους και της ύψους των στοιχείων: αν πρέπει να περιλαμβάνουν το εσωτερικό περιθώριο (padding) και τα πλαίσια.