Μετακίνηση αντικειμένων σε διάταξη CSS πλέγματος [Οδηγός]
Χρησιμοποιώντας το Μονάδα διαμόρφωσης πλέγματος CSS στο σχεδιασμό ιστοσελίδων γίνεται όλο και πιο εφικτό καθώς αρχίζουν οι περισσότεροι φυλλομετρητές υποστηρίξτε το. Ενώ δημιουργείτε διατάξεις που γεμίζουν κελιά δικτύου, μπορεί να έρθει μια στιγμή, όμως, όταν θέλετε να επιτύχετε πιο περίπλοκα πράγματα.
Για παράδειγμα, μπορεί να θέλετε να κινούνται ελαφρά μερικά από τα στοιχεία του πλέγματος κολλημένα στις περιοχές πλέγματος. Μπορεί επίσης να θέλετε να μετακινήστε τα έξω από το δοχείο δικτύου (υπερχείλιση), ή πάνω από το άλλο (επικάλυψη), ή απλά ... σε κάποιο κενό χώρο γύρω.
Έτσι, σε αυτή τη θέση, θα σας δείξω πώς μπορείτε μετακίνηση, παραγγελία, υπερχείλιση, επικάλυψη και μεγέθη πλέγματος όταν χρησιμοποιείτε τη μονάδα διάταξης διάταξης πλέγματος CSS.
Δημιουργήστε ένα πλέγμα CSS
Πρώτον, ας δημιουργήσουμε ένα απλό δίκτυο CSS με μια σειρά και τρεις στήλες.
Στο HTML, δημιουργούμε μια δέσμη divs όπου το δοχείο πλέγματος περιέχει τα τρία στοιχεία πλέγματος.
Στο CSS, το δοχείο δικτύου έχει το εμφάνιση: πλέγμα; ιδιοκτησία και τα στοιχεία πλέγματος έχω περιοχή πλέγματος που προσδιορίζει τα ονόματα των περιοχών του πλέγματος.
Εμείς επίσης πρόσθεσε το πλέγμα-πρότυπο-περιοχές ιδιοκτησία στο δοχείο πλέγματος, στο οποίο χρησιμοποιούνται τα ονόματα των περιοχών πλέγματος ορίστε τις περιοχές πλέγματος στα κυψέλες δικτύου που αντιπροσωπεύουν.
Όλες οι στήλες μέγεθος ενός κλάσματος (fr) του πλάτους του δοχείου, εξασφαλίζοντας την συγκράτηση των στοιχείων του πλέγματος.
.πλέγμα-δοχείο εμφάνιση: πλέγμα; πλέγμα-πρότυπο-περιοχές: "αριστερά κέντρο δεξιά"? πλέγμα-πρότυπο-στήλες: επανάληψη (3, 1fr); πλέγμα-πρότυπο-γραμμές: 80px; κεντρικό διάκενο: 5px; πλάτος: 360px; Χρώμα φόντου: ματζέντα. .grid-left περιοχή πλέγματος: αριστερά. .grid-center πλέγμα-περιοχή: κέντρο; .grid-right πλέγμα-περιοχή: δεξιά; .grid-container div φόντο-χρώμα: ανοιχτό πράσινο;
Στοιχεία πλέγματος υπερχείλισης
Μπορείτε να δημιουργήσετε ένα στοιχείο πλέγματος υπερχειλίσει το δοχείο του δικτύου αν είναι απαραίτητο για μια διάταξη. Για να επιτύχετε το φαινόμενο υπερχείλισης, πρέπει απλά να το κάνετε χρησιμοποιήστε διαφορετικό μέγεθος στήλης:
.πλέγμα-δοχείο εμφάνιση: πλέγμα; πλέγμα-πρότυπο-περιοχές: "αριστερά κέντρο δεξιά"? πλέγμα-πρότυπο-στήλες: επανάληψη (3, 150px); κεντρικό διάκενο: 5px;
ο το άθροισμα του μεγέθους της στήλης και του κενού είναι μεγαλύτερο από το πλάτος του δοχείου, η οποία προκαλεί τα στοιχεία του πλέγματος να υπερχειλίζουν το δοχείο τους.
Επικάλυψη στοιχείων πλέγματος
ΕΝΑ το στοιχείο πλέγματος μπορεί να επικαλύπτεται (κάλυψη πλήρως ή μερικώς) ένα άλλο στοιχείο πλέγματος στις ακόλουθες περιπτώσεις:
- Είναι ρυθμισμένο να εκτείνεται σε (και πάνω) τα κελιά ενός άλλου στοιχείου πλέγματος.
- Το μέγεθός του έχει αυξηθεί, προκαλώντας την επικάλυψη του με το κοντινό στοιχείο πλέγματος.
- Μετακινείται πάνω από ένα άλλο στοιχείο πλέγματος.
Θα συζητήσουμε τη δεύτερη και την τρίτη περίπτωση αργότερα, στο “Κόλλα” και “Κίνηση” τμήματα.
Πρώτον, ας δούμε την πρώτη περίπτωση όταν ένα στοιχείο πλέγματος εκτείνεται σε ένα άλλο.
Το στοιχείο πλέγματος στο κέντρο έχει πέρασε από την αριστερή, επομένως, μόνο δύο στοιχεία είναι ορατά στην οθόνη.
.κέντρο πλέγματος πλέγμα-περιοχή: κέντρο; πλέγμα-στήλη: 1/3;
ο στήλη-στήλη και γραμμή πλέγματος ιδιότητες ορίστε γραμμές πλέγματος μεταξύ των οποίων πρέπει να προσαρμοστεί μια στήλη ή μια σειρά.
Στο παρακάτω διάγραμμα, μπορείτε να δείτε πώς πλέγμα-στήλη: 1/3 Ο κανόνας CSS λειτουργεί: η κεντρική στήλη εκτείνεται μεταξύ των γραμμών δικτύου 1 και 3. Ως αποτέλεσμα, η κεντρική στήλη επικαλύπτει την αριστερή.
Μετακίνηση στοιχείων πλέγματος
Κινούμενος, εννοώ μετακινώντας τα στοιχεία λίγο γύρω. Εάν θέλετε να μεταφέρετε τελείως ένα αντικείμενο σε ένα άλλο κελί / περιοχή πλέγματος, συνιστούμε να ενημερώσετε τον κώδικα δημιουργίας πλέγματος.
Η μετακίνηση γύρω από τα στοιχεία του πλέγματος είναι απλή. Μόλις Χρησιμοποιήστε το περιθώριο, ο μεταμορφώνω, ή το θέση: σχετική. ιδιότητες. Δείτε παρακάτω πώς μετακινούνται τα στοιχεία χρησιμοποιώντας αυτές τις ιδιότητες.
Τα κεντρικά και τα δεξιά στοιχεία πλέγματος μπορούν να μετακινηθούν (όπως φαίνεται παραπάνω) με τους ακόλουθους τρόπους:
1. Χρήση περιθώριο
Τα αρνητικά περιθώρια αυξάνουν τις διαστάσεις των στοιχείων του πλέγματος, ενώ τα θετικά περιθώρια τους κόβουν. Χρησιμοποιώντας ένα συνδυασμό και των δύο, μπορείτε να μετακινήσετε τα στοιχεία του πλέγματος γύρω σας.
.κέντρο πλέγματος πλέγμα-περιοχή: κέντρο; περιθώριο-αριστερά: -10px; περιθώριο-δεξιά: 10px; περιθώριο-κορυφή: -10px; περιθώριο-κάτω: 10px; .grid-right πλέγμα-περιοχή: δεξιά; περιθώριο-αριστερά: 10px; περιθώριο-δεξιά: -10px; περιθώριο-κορυφή: -10px; περιθώριο-κάτω: 10px;
2. Χρήση μεταμορφώνω
ο μεταφράζω() Λειτουργία CSS μετακινεί ένα στοιχείο κατά μήκος των αξόνων x και y. Χρησιμοποιώντας το μαζί με το μεταμορφώνω property σας επιτρέπει να αλλάξετε τη θέση ενός στοιχείου πλέγματος.
.κέντρο πλέγματος πλέγμα-περιοχή: κέντρο; μετασχηματισμός: μεταφράστε (-10px, -10px); .grid-right πλέγμα-περιοχή: δεξιά; μετασχηματισμός: μεταφράστε (10px, -10px);
3. Χρήση θέση
Χρησιμοποιώντας το θέση: σχετική. με το καθορισμένο μπλουζα, κάτω μέρος, αριστερά, και σωστά ιδιότητες μπορούν να χρησιμοποιηθούν για τη μετακίνηση γύρω από τα στοιχεία πλέγματος επίσης.
.κέντρο πλέγματος πλέγμα-περιοχή: κέντρο; θέση: σχετική. κάτω: 10px; δεξιά: 10px; .grid-right πλέγμα-περιοχή: δεξιά; θέση: σχετική. κάτω: 10px; αριστερά: 10px;
Παραγγελία στοιχείων πλέγματος
Τα στοιχεία πλέγματος εμφανίζονται στην οθόνη με τη σειρά που εμφανίζονται στον πηγαίο κώδικα HTML.
Στην προηγούμενη ενότητα, όταν το κεντρικό στοιχείο μετακινήθηκε προς τα αριστερά, τοποθετήθηκε στην κορυφή του αριστερού αντικειμένου από το πρόγραμμα περιήγησης. Αυτό συνέβη επειδή στο HTML, Ωστόσο, μπορούμε αλλάξτε τα στοιχεία πλέγματος παραγγελιών χρησιμοποιώντας το Χρησιμοποιώντας το Όπως και στη μονάδα διάταξης διάταξης πλέγματος CSS, αλλάζοντας τη σειρά στοιχείων σε HTML δεν επηρεάζει τη διάταξη του πλέγματος, μπορείτε επίσης να βάλετε Εάν χρησιμοποιείτε σειρές ή στήλες αυτόματου μεγέθους για ένα στοιχείο πλέγματος (χρησιμοποιώντας Θυμηθείτε, στο δείγμα του πλέγματος, και οι τρεις στήλες λαμβάνουν ένα κλάσμα ( Εδώ, αλλάζουμε το μέγεθος του αριστερού στοιχείου χρησιμοποιώντας το Εδώ, αλλάζουμε το μέγεθος του αριστερού στοιχείου χρησιμοποιώντας το z-δείκτης ή το Σειρά Ιδιότητες CSS.
z-δείκτης: 1; κανόνα, το αριστερό στοιχείο πλέγματος πήρε ένα υψηλότερο πλαίσιο στοίβαξης.. πλέγμα-αριστερά περιοχή πλέγματος: αριστερά; z-δείκτης: 1;
Στοιχεία πλέγματος μεγέθους
αυτο, fr, gr μονάδες), θα συρρικνωθεί για να δημιουργήσει χώρο για το γειτονικό στοιχείο που έχει μεγαλώσει σε μέγεθος μόνο εάν το εν λόγω στοιχείο δεν είχε μέγεθος από μεταμορφώνω ή αρνητικό περιθώριο.fr) του δοχείου πλέγματος. Ρίξτε μια ματιά στον τρόπο εμφάνισης και των τριών στοιχείων, αφού το αριστερό έχει αλλάξει με δύο διαφορετικούς τρόπους.1. Μέγεθος με
πλάτος και ύψοςπλάτος και ύψος ιδιότητες. Ως αποτέλεσμα, παραμένει μέσα στο δοχείο πλέγματος.
.πλέγμα-αριστερά περιοχή πλέγματος: αριστερά; πλάτος: 200px; ύψος: 90px;
2. Μεγέθη με
μεταμορφώνωμεταμορφώνω ιδιοκτησία. Ως αποτέλεσμα, υπερχειλίζει το δοχείο και το κενό του πλέγματος εξαφανίζεται επίσης.
.πλέγμα-αριστερά περιοχή πλέγματος: αριστερά; μετασχηματισμός: κλίμακα (1.8);
