Μια ματιά στο CSS3 Box-size
Όχι πολύ καιρό πριν, όταν δημιουργούμε ένα κουτί σε μια ιστοσελίδα, ας πούμε με ένα div, καθορίζουμε 100px τόσο για το πλάτος όσο και για το ύψος, ακολουθούμενο από υλικό παραγεμίσματος Για 10px και σύνορα περίπου 10px επισης.
div πλάτος: 100px; ύψος: 100px; padding: 10px; σύνορα: 10px στερεά #eaeaea;
Τα προγράμματα περιήγησης θα επεκτείνουν το μέγεθος του κουτιού σε 140px, όπου αυτό το ποσό 140px του συνολικού πλάτους / ύψους αποτελείται από την προσθήκη του υλικό παραγεμίσματος και το σύνορα ως εξής; 100px [πλάτος / ύψος] + (2 x 10px [padding]) + (2 x 10px [σύνορα]).
Ωστόσο, μερικές φορές αυτό το αποτέλεσμα δεν είναι αυτό που περιμένουμε να είναι. Μερικές φορές, χρειαζόμαστε το κουτί για πάντα 100px ανεξάρτητα από την προσθήκη ή τα σύνορα που προστέθηκαν.
Για να ξεπεραστεί ένα τέτοιο επαναλαμβανόμενο πρόβλημα κατά τη δημιουργία διάταξης ιστοσελίδας, μπορούμε να χρησιμοποιήσουμε το CSS3 μέγεθος κιβωτίου ιδιότητα για τον έλεγχο του πώς CSS μοντέλο κουτιού θα πρέπει να εργάζονται στα προγράμματα περιήγησης.
Χρήση μεγέθους κουτιού
ο μέγεθος κιβωτίου property έχει δύο επιλογές αξίας, πρώτα το περιεχόμενο-πλαίσιο. που είναι η προεπιλεγμένη τιμή, όταν χρησιμοποιούμε αυτή την τιμή, το μοντέλο κουτιού θα συμπεριφέρεται όπως περιγράψαμε παραπάνω.
Και το δεύτερο είναι border box, όπου το μέγεθος του κουτιού θα υπολογιστεί αφαιρώντας το μέγεθος του συγκεκριμένου περιεχομένου με την επένδυση και τα σύνορα προστίθενται.
div πλάτος: 100px; ύψος: 100px; padding: 10px; σύνορα: 10px στερεά #eaeaea; μέγεθος κιβωτίου: πλαίσιο-πλαίσιο? -Moz-box-μέγεθος: border-box? / * Firefox 1-3 * / -webkit-box-size: border-box; / * Safari * /
Για παράδειγμα, όταν έχουμε ένα κιβώτιο όπως αυτό που περιγράψαμε παραπάνω (100px square με 10 pixels για το padding και τα σύνορα), το μέγεθος του περιεχομένου θα μειωθεί στο 60px, και το συνολικό μέγεθος του κουτιού παραμένει 100px, όπου η εξίσωση της αφαίρεσης μπορεί να περιγραφεί ως εξής: 100px [πλάτος / ύψος] - ((2 x 10px [padding]) + (2 x 10px [σύνορα])).
- Διαδήλωση
- Λήψη πηγής
Υποστήριξη προγράμματος περιήγησης
ο μέγεθος κιβωτίου ιδιοκτησία είναι υποστηρίζεται σε όλα τα προγράμματα περιήγησης. Firefox 3.6+, Safari 3, Opera 8.5+ και Internet Explorer 8 και παραπάνω.
Έτσι, αν γνωρίζετε ότι οι περισσότεροι από τους επισκέπτες σας δεν θα χρησιμοποιούν εκδόσεις του Internet Explorer κάτω από 8, μπορείτε να χρησιμοποιήσετε αυτή τη χρήσιμη πρόταση (χάρη στον Paul Irish).
* μέγεθος-κιβώτιο: πλαίσιο-πλαίσιο? -Moz-box-μέγεθος: border-box? / * Firefox 1-3 * / -webkit-box-size: border-box; / * Safari * /
Το απόσπασμα παραπάνω θα εφαρμόσει το μέγεθος κιβωτίου ιδιοκτησίας σε όλα τα στοιχεία της ιστοσελίδας σας.
Παράδειγμα
Σε αυτή την ενότητα, θα σας δείξουμε ένα πραγματικό παράδειγμα για το πώς μπορούμε να το χρησιμοποιήσουμε μέγεθος κιβωτίου ιδιοκτησία. Θα δημιουργήσουμε μια απλή πλοήγηση, με βάση την παρακάτω σήμανση HTML, με πέντε μενού συνδέσεων σε αυτό.
Στη συνέχεια, θα προσθέσουμε μερικά διακοσμητικά στυλ. όπως, ρυθμίστε την πλοήγηση fix πάχος για 500px και το πλάτος του συνδέσμου για 100px το καθένα, στη συνέχεια εισάγετε το στοιχείο της λίστας και δώστε διαφορετικά υπόβαθρα για κάθε μενού συνδέσεων, ώστε να μπορείτε να δείτε τη διαφορά μεταξύ τους.
nav πλάτος: 500px; περιθώριο: 50px αυτόματο 0; ύψος: 50px; nav ul padding: 0; περιθώριο: 0; nav li float: αριστερά; nav a εμφάνιση: inline-block; πλάτος: 100px; ύψος: 100%. χρώμα φόντου: #ccc; χρώμα: # 555; κείμενο-διακόσμηση: κανένα? γραμματοσειρά-οικογένεια: Arial, sans-serif; μέγεθος γραμματοσειράς: 12pt; ύψος γραμμής: 300%. κείμενο-ευθυγράμμιση: κέντρο; nav a εμφάνιση: inline-block; πλάτος: 100px; ύψος: 100%. χρώμα: # 555; κείμενο-διακόσμηση: κανένα? γραμματοσειρά-οικογένεια: Arial, sans-serif; nav li: nth-child (1) α χρώμα-φόντο: # E9E9E9; αριστερά: 0; nav li: nth-child (2) α χρώμα-φόντο: # E4E4E4; nav li: nth-παιδί (3) a χρώμα-φόντο: #DFDFDF; nav li: nth-child (4) α χρώμα-φόντου: # D9D9D9; nav li: nth-child (5) α χρώμα-φόντου: # D4D4D4; όριο-δεξιά: 0;
Σε αυτό το σημείο, η πλοήγησή μας φαίνεται απλή.
Ωστόσο, το πρόβλημα θα προκύψει όταν προσθέσουμε αριστερά ή δεξιά περιγράμματα στο μενού συνδέσμων.
ναυάγιο όριο-αριστερά: 1px στερεό # aaa; border-right: 1px solid # f3f3f3;
Το μενού θα υπερχειλίσει προς τα κάτω, καθώς το πλάτος του συνδέσμου δεν είναι πλέον 100px. Είναι τώρα 102px, προκαλώντας το συνολικό πλάτος της πλοήγησης 10px μακρύτερα από αυτά που έχουμε καθορίσει παραπάνω (500px).
Για να ξεπεραστεί αυτό το ζήτημα, πρέπει να εφαρμόσουμε το μέγεθος κιβωτίου ιδιοκτησίας, ως εξής:
ναυάγιο όριο-αριστερά: 1px στερεό # aaa; border-right: 1px solid # f3f3f3; μέγεθος κιβωτίου: πλαίσιο-πλαίσιο? -Moz-box-μέγεθος: border-box? -webkit-box-μέγεθος: border-box?
- Διαδήλωση
- Λήψη πηγής
Περαιτέρω ανάγνωση
Και τελικά, εάν είστε ο περιπετειώδης τύπος και θέλετε να ψάξετε βαθύτερα σε αυτό το θέμα, έχουμε συνθέσει μερικές επιλεγμένες αναφορές για σας:
- Κατανόηση του μοντέλου κουτιού CSS - Τεχνική Δημοκρατία
- Σφάλμα μεγέθους κουτιού στο Firefox - BugZilla
- Box-μέγεθος FTW - Paul Ιρλανδίας
