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

Η ιδιότητα πλάτος CSS σάς επιτρέπει να ορίσετε το πλάτος της περιοχής περιεχομένου του στοιχείου και η ιδιότητα ύψος σάς επιτρέπει να ορίσετε το ύψος της περιοχής περιεχομένου:

Σημειώστε ότι οι ιδιότητες πλάτους και ύψους καθορίζουν μόνο το μέγεθος της περιοχής περιεχομένου· για να υπολογίσετε το συνολικό πλάτος ενός στοιχείου μπλοκ, πρέπει να προσθέσετε το πλάτος της περιοχής περιεχομένου, την αριστερή και τη δεξιά γέμιση και το πλάτος της αριστερής και δεξιό περίγραμμα. Το ίδιο ισχύει και για το συνολικό ύψος του στοιχείου, μόνο όλες οι τιμές υπολογίζονται κάθετα:

Για αυτήν την παράγραφο, θα ορίσουμε μόνο το πλάτος και το ύψος.

Αυτή η παράγραφος περιέχει, εκτός από το πλάτος και το ύψος, μια εσωτερική επένδυση, ένα περίγραμμα και μια εξωτερική επένδυση.

Δοκιμάστε "

Το παράδειγμα δείχνει ξεκάθαρα ότι το δεύτερο στοιχείο καταλαμβάνει περισσότερο χώρο από το πρώτο. Αν υπολογίσουμε χρησιμοποιώντας τον τύπο μας, τότε οι διαστάσεις της πρώτης παραγράφου είναι 150x100 pixel και οι διαστάσεις της δεύτερης παραγράφου είναι:

Συνολικό ύψος:	5 εικονοστοιχεία	+	10 εικονοστοιχεία	+	100 εικονοστοιχεία	+	10 εικονοστοιχεία	+	5 εικονοστοιχεία	= 130 εικονοστοιχεία
	ανώτερος πλαίσιο		ανώτερος εσοχή		ύψος		πιο χαμηλα εσοχή		πιο χαμηλα πλαίσιο

δηλαδή 180x130 pixel.

Υπερχείλιση στοιχείων

Αφού προσδιορίσετε το πλάτος και το ύψος για ένα στοιχείο, θα πρέπει να δώσετε προσοχή σε ένα σημαντικό σημείο - το περιεχόμενο που βρίσκεται μέσα στο στοιχείο μπορεί να υπερβαίνει το καθορισμένο μέγεθος μπλοκ. Σε αυτήν την περίπτωση, μέρος του περιεχομένου θα υπερβεί τα όρια του στοιχείου. Για να αποφύγετε αυτήν τη δυσάρεστη στιγμή, μπορείτε να χρησιμοποιήσετε την ιδιότητα υπερχείλισης CSS. Η ιδιότητα υπερχείλισης λέει στο πρόγραμμα περιήγησης τι πρέπει να κάνει εάν το περιεχόμενο ενός μπλοκ υπερβαίνει το μέγεθός του. Αυτή η ιδιότητα μπορεί να λάβει μία από τέσσερις τιμές:

• ορατή - η προεπιλεγμένη τιμή που χρησιμοποιείται από το πρόγραμμα περιήγησης. Η ρύθμιση αυτής της τιμής θα έχει το ίδιο αποτέλεσμα με τη μη ρύθμιση της ιδιότητας υπερχείλισης.
• κύλιση - προσθέτει κάθετες και οριζόντιες γραμμές κύλισης σε ένα στοιχείο.
• αυτόματη - προσθέτει γραμμές κύλισης εάν είναι απαραίτητο.
• κρυφό - κρύβει μέρος του περιεχομένου που εκτείνεται πέρα ​​από τα όρια του στοιχείου μπλοκ.

Βλαντ Μέρζεβιτς

Οποιοδήποτε στοιχείο μπλοκ αποτελείται από ένα σύνολο ιδιοτήτων, όπως τα φύλλα λάχανου που τοποθετούνται το ένα πάνω στο άλλο. Η βάση του μπλοκ είναι το περιεχόμενό του (αυτό μπορεί να είναι κείμενο, εικόνα κ.λπ.), το πλάτος του οποίου καθορίζεται από την ιδιότητα πλάτος και το ύψος κατά ύψος . υπάρχουν γεμίσματα γύρω από το περιεχόμενο, δημιουργούν κενό χώρο από το περιεχόμενο μέχρι την εσωτερική άκρη των περιγραμμάτων. μετά έρχονται τα ίδια τα σύνορα (περιθώριο) και το μπλοκ ολοκληρώνεται με περιθώρια (περιθώριο), ο αόρατος κενός χώρος από την εξωτερική άκρη των περιγραμμάτων. Το πλάτος του μπλοκ είναι μια σύνθετη τιμή και αποτελείται από πολλές τιμές ιδιοτήτων:

• πλάτος - πλάτος περιεχομένου, δηλ. μπλοκ περιεχόμενο?
• padding-left και padding-right - περιθώριο στα αριστερά και δεξιά του περιεχομένου.
• περίγραμμα-αριστερά και περίγραμμα-δεξιά - πάχος του περιγράμματος στα αριστερά και στα δεξιά.
• περιθώριο-αριστερά και περιθώριο-δεξιά - αριστερό και δεξί περιθώριο.

Ορισμένες ιδιότητες ενδέχεται να λείπουν, οπότε το πλάτος δεν επηρεάζεται. Το συνολικό πλάτος φαίνεται στο Σχ. 1 ως μαύρη διακεκομμένη γραμμή.

Ρύζι. 1. Πλάτος μπλοκ

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

Ας υποθέσουμε ότι το παρακάτω στυλ είναι γραμμένο για ένα επίπεδο.

Πλάτος: 300 px; /* Πλάτος επιπέδου */ περιθώριο: 7 εικονοστοιχεία; /* Τιμή συμπλήρωσης */ περίγραμμα: 4 εικονοστοιχεία συμπαγές μαύρο; /* Επιλογές περιγράμματος */ padding: 10px; /* Περιθώρια γύρω από το κείμενο */

Το πλάτος του επιπέδου σύμφωνα με αυτήν την καταχώρηση θα είναι ίσο με 342 εικονοστοιχεία, η τιμή αυτή προκύπτει προσθέτοντας την τιμή του πλάτους περιεχομένου συν το αριστερό συμπλήρωμα, το αριστερό περίγραμμα και το αριστερό περιθώριο, συν το δεξί περιθώριο, το δεξί περίγραμμα και το δεξί περιθώριο. Ας συνοψίσουμε όλους τους αριθμούς.

Πλάτος = 300 + 7 + 7 + 4 + 4 + 10 + 10 = 342

Θα πρέπει να σημειωθεί ότι το μοντέλο μπλοκ με το σχηματισμό πλάτους φέρει μαζί του πολλές ενοχλήσεις. Πρέπει συνεχώς να κάνετε υπολογισμούς όταν πρέπει να ορίσετε ένα συγκεκριμένο πλάτος μπλοκ. Τα προβλήματα ξεκινούν επίσης κατά τον συνδυασμό διαφορετικές μονάδεςμετρήσεις, ιδιαίτερα ποσοστά και pixel. Ας υποθέσουμε ότι το πλάτος περιεχομένου έχει οριστεί στο 90%, αν προσθέσουμε τα περιθώρια και τα περιθώρια που καθορίζονται σε pixel, τότε είναι αδύνατο να υπολογιστεί το συνολικό πλάτος του μπλοκ, καθώς τα ποσοστά δεν μεταφράζονται απευθείας σε εικονοστοιχεία. Αυτό μπορεί να έχει ως αποτέλεσμα το συνολικό πλάτος του μπλοκ να υπερβαίνει το πλάτος της ιστοσελίδας, με αποτέλεσμα μια οριζόντια γραμμή κύλισης. Υπάρχουν δύο τρόποι εξόδου από αυτήν την κατάσταση - αλλάξτε τον αλγόριθμο του μοντέλου μπλοκ και χρησιμοποιήστε ένθετα επίπεδα.

Αλγόριθμος Block Model

Όπως αναφέρθηκε, το πλάτος του μπλοκ σχηματίζεται από το πλάτος του περιεχομένου και τις τιμές των περιθωρίων, των περιθωρίων και της επένδυσης. Στο πρόγραμμα περιήγησης Internet ExplorerΟ αλγόριθμος αλλάζει αυτόματα και το πλάτος ολόκληρου του μπλοκ ορίζεται ίσο με το πλάτος . Άλλα προγράμματα περιήγησης δεν αλλάζουν τον αλγόριθμο τόσο εύκολα και, επιπλέον, γνωρίζετε ότι η λειτουργία συμβατότητας είναι κακό. Το CSS3 έχει μια υπέροχη ιδιότητα μεγέθους κουτιού που θα μας φανεί χρήσιμη. Όταν οριστεί σε πλαίσιο περιγράμματος, το πλάτος αρχίζει να περιλαμβάνει περιθώρια και περιγράμματα, αλλά όχι γέμιση. Έτσι, συνδέοντας το μέγεθος του κουτιού με την τιμή του πλαισίου περιγράμματος στο στυλ μας, μπορούμε να ορίσουμε το πλάτος ως ποσοστό και να καθορίσουμε με ασφάλεια περίγραμμα και γέμιση χωρίς φόβο ότι θα αλλάξει το πλάτος του μπλοκ. Δυστυχώς, υπάρχει ένα μικρό πρόβλημα με αυτήν την ιδιότητα, όπως συμβαίνει συνήθως με τα προγράμματα περιήγησης - δεν το καταλαβαίνουν όλα τα προγράμματα περιήγησης. Χαίρομαι που τα προγράμματα περιήγησης υποστηρίζουν τουλάχιστον ιδιότητες για συγκεκριμένα προγράμματα περιήγησης. Στον πίνακα 1 δείχνει την υποστήριξη του προγράμματος περιήγησης.

Τραπέζι 1. Υποστήριξη προγράμματος περιήγησης για την ιδιότητα μεγέθους κουτιού

Πρόγραμμα περιήγησης	Internet Explorer	Χρώμιο	ΛΥΡΙΚΗ ΣΚΗΝΗ	Σαφάρι	Firefox
Εκδοχή	8.0+	2.0+	7.0+	3.0+	1.0+
Ιδιοκτησία	μέγεθος κουτιού	-webkit-box-sizing	μέγεθος κουτιού	-webkit-box-sizing	-moz-box-sizing

Όπως μπορείτε να δείτε από τον πίνακα, υπάρχει σύγχυση και αμφιταλαντεύσεις στις ιδιότητες, επομένως θα πρέπει να φτιάξετε ένα υβρίδιο και να υποδείξετε και τις τρεις ιδιότητες (παράδειγμα 1).

Παράδειγμα 1: Πλάτος μπλοκ

HTML5 CSS3 IE Cr Op Sa Fx

Αυτό το παράδειγμα θα λειτουργήσει σε όλα τα προγράμματα περιήγησης που αναφέρονται στον πίνακα. 1, ωστόσο δεν ισχύει στο CSS3 λόγω της χρήσης μη τυπικών ιδιοτήτων που ξεκινούν με -moz και -webkit. Το πλάτος του μπλοκ είναι 100% συμπεριλαμβανομένων των τιμών πλήρωσης. Χωρίς την ιδιότητα μεγέθους πλαισίου, θα εμφανιστεί μια οριζόντια γραμμή κύλισης στο πρόγραμμα περιήγησης.

Ένθετα στρώματα

Η χρήση της ιδιότητας box-sizing είναι καλή για όλους, εκτός από το ότι δεν λειτουργεί σε παλαιότερες εκδόσεις του IE. Εάν σχεδιάζετε έναν ιστότοπο που βασίζεται σε IE7 και IE6, η παλιά δοκιμασμένη μέθοδος ένθεσης στρωμάτων είναι κατάλληλη για εσάς. Η ιδέα είναι απλή - για το στοιχείο του εξωτερικού μπλοκ, ορίζεται μόνο το απαιτούμενο πλάτος και για το ένθετο μπλοκ, ορίζονται όλα τα άλλα - περιθώρια, περιθώρια και επένδυση. Δεδομένου ότι το προεπιλεγμένο πλάτος ενός μπλοκ είναι ίσο με το διαθέσιμο πλάτος του μητρικού του, τα μπλοκ κατά κάποιο τρόπο θα επικαλύπτονται μεταξύ τους, αλλά το πραγματικό πλάτος του συνδυασμένου στοιχείου θα ορίζεται σαφώς. Το Παράδειγμα 2 δείχνει τη χρήση ένθετων στρωμάτων.

Παράδειγμα 2: Ένθετα στρώματα

HTML5 CSS 2.1 IE Cr Op Sa Fx

Αποτέλεσμα αυτό το παράδειγμαφαίνεται στο Σχ. 2.

Ρύζι. 2. Πλάτος μπλοκ σε ποσοστό

Το πλεονέκτημα των ένθετων επιπέδων είναι η χρήση εσοχών (το μέγεθος του κουτιού δεν τις λαμβάνει υπόψη), η ευελιξία της μεθόδου και το γεγονός ότι το φόντο μπορεί να προστεθεί σε ένα ή άλλο στρώμα, εάν το επιθυμείτε. Αυτό αλλάζει κάπως εμφάνισηστοιχεία, αυτό ισχύει ιδιαίτερα όταν περιλαμβάνονται εικόνες φόντου. Μεταξύ των μειονεκτημάτων της μεθόδου, μπορεί να σημειωθεί η συμπερίληψη ενός πρόσθετου μπλοκ, το οποίο περιπλέκει τη δομή του κώδικα, ειδικά εάν η μέθοδος χρησιμοποιείται συχνά. Αλλά αυτό μπορεί να θεωρηθεί μικρό πράγμα σε σύγκριση με τα οφέλη.

Περιγραφή

Ορίζει το πλάτος των στοιχείων σε επίπεδο μπλοκ ή αντικαταστάσιμων στοιχείων (για παράδειγμα, την ετικέτα ). Το πλάτος δεν περιλαμβάνει το πάχος των περιγραμμάτων γύρω από το στοιχείο, τις τιμές πλήρωσης ή περιθωρίου.

Τα προγράμματα περιήγησης δεν χειρίζονται τα πλάτη με τον ίδιο τρόπο· το αποτέλεσμα εμφάνισης εξαρτάται από το πρόγραμμα περιήγησης που χρησιμοποιείται.. Στον πίνακα 1 δίνονται πιθανές επιλογές και το πλάτος που προκύπτει.

Τραπέζι 1. Η ενέργεια πλάτους στα προγράμματα περιήγησης

	Internet Explorer	Opera 10+, Firefox, Chrome, Safari	Όπερα 9
Δεν έχει καθοριστεί (λειτουργία συμβατότητας)	Εάν το περιεχόμενο υπερβαίνει το καθορισμένο πλάτος, το μέγεθος του μπλοκ αλλάζει ώστε να ταιριάζει στο περιεχόμενο. Διαφορετικά, το πλάτος του μπλοκ είναι ίσο με την τιμή του πλάτους.	Σε όλες τις περιπτώσεις, το πρόγραμμα περιήγησης λειτουργεί σύμφωνα με τις προδιαγραφές CSS. Δηλαδή, το πλάτος του μπλοκ προκύπτει προσθέτοντας τις τιμές πλάτος , padding , περιθώριο και περίγραμμα . Τα περιεχόμενα του μπλοκ, εάν δεν ταιριάζουν στις καθορισμένες διαστάσεις, εμφανίζονται στο επάνω μέρος του μπλοκ.	Το πλάτος είναι ίσο με την τιμή του πλάτους.
Μεταβατικό HTML
Αυστηρό HTML	Το πλάτος σχηματίζεται προσθέτοντας τις τιμές του πλάτους, της επένδυσης, του περιθωρίου και του περιγράμματος. Εάν τα περιεχόμενα του μπλοκ δεν ταιριάζουν στις καθορισμένες διαστάσεις, εμφανίζονται στην κορυφή.		Το πλάτος είναι ίσο με την τιμή του πλάτους συν την επένδυση, το περιθώριο και το περίγραμμα. Εάν τα περιεχόμενα του μπλοκ δεν ταιριάζουν στις καθορισμένες διαστάσεις, εμφανίζονται στην κορυφή.
HTML 5
XHTML

Σύνταξη

πλάτος: τιμή | ενδιαφέρον | αυτοκινητο | κληρονομώ

Αξίες

Οποιεσδήποτε μονάδες μήκους γίνονται αποδεκτές στο CSS γίνονται δεκτές ως τιμές - για παράδειγμα, pixel (px), ίντσες (in), σημεία (pt) κ.λπ. Όταν χρησιμοποιείται σημειογραφία ποσοστού, το πλάτος του στοιχείου υπολογίζεται ανάλογα με το πλάτος του το μητρικό στοιχείο. Εάν ο γονέας δεν ορίζεται ρητά, τότε το παράθυρο του προγράμματος περιήγησης λειτουργεί ως αυτό.

Αυτόματο Ρυθμίζει το πλάτος με βάση τον τύπο και το περιεχόμενο του στοιχείου. inherit Κληρονομεί την αξία του γονέα.

HTML5 CSS2.1 IE Cr Op Sa Fx

Το αποτέλεσμα αυτού του παραδείγματος, όπως φαίνεται στο πρόγραμμα περιήγησης Safari, φαίνεται στην Εικ. 1.

Ρύζι. 1. Πλάτος μπλοκ

Μοντέλο αντικειμένου

document.getElementById("elementID").style.width

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

Ο Internet Explorer 6 ορίζει εσφαλμένα το πλάτος ως ελάχιστο πλάτος . Στη λειτουργία ιδιόρρυθμης λειτουργίας, οι εκδόσεις του Internet Explorer έως και 8.0 υπολογίζουν εσφαλμένα το πλάτος ενός στοιχείου χωρίς να προσθέτουν τιμές πλήρωσης, περιθωρίου ή περιθωρίου σε αυτό.

Οι εκδόσεις του Internet Explorer έως και 7.0 δεν υποστηρίζουν την τιμή κληρονομιάς.

Πιθανότατα δεν χρειάζεται να πείτε σε κανέναν για τα πλεονεκτήματα της διάταξης div έναντι της διάταξης σε πίνακα. Όλοι το έχουν καταλάβει εδώ και πολύ καιρό και έχουν αλλάξει σε αυτούς από πίνακες. Λοιπόν, όσοι δεν έχουν αλλάξει σύντομα θα καταλάβουν τα λάθη τους και θα το κάνουν. Αλλά όπως στο οποιοδήποτε μάθημα - εδώ Υπάρχουν επίσης παγίδες: οι ντίβες δεν συμπεριφέρονται όπως θα έπρεπε ή είναι αδύνατο να διαμορφωθεί κάποια συγκεκριμένη δομή, υπάρχουν πολλά εμπόδια, αλλά υπάρχει πάντα μόνο ένας σχεδιαστής διάταξης...

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

Αυτό αξίζει πάντα να το θυμόμαστε

Υπάρχει μια προσέγγιση στη διάταξη που πρέπει να ακολουθείται όσο το δυνατόν συχνότερα και με ακρίβεια. Αυτή είναι η ανοργανοποίηση του δέντρου DOM. Αυτό έχει πολλά θεμελιωμένα πλεονεκτήματα: απλοποιεί την ίδια τη διαδικασία διάταξης, μειώνει στο ελάχιστο τον αριθμό των πιθανών σφαλμάτων και βελτιώνει τη διαφάνεια του κώδικα. Πρέπει πάντα να το θυμόμαστε αυτό και να δίνουμε ιδιαίτερη προσοχή σε αυτό όταν σχεδιάζουμε τη δομή.

Οι βασικές αρχές είναι οι εξής: για την εσοχή χρησιμοποιούμε μόνο padding και margin (ανάλογα με την ανάγκη) - δεν είναι καθόλου απαραίτητο να κάνουμε ξεχωριστό div 20 pixel, περιορίζουμε την ένθεση στο ελάχιστο, δεν το παρακάνουμε με τη θέση : σχετικές και επακόλουθες μετατοπίσεις μπλοκ (αν χρησιμοποιηθούν λανθασμένα μπορεί να οδηγήσει σε μισή ώρα επεξεργασία ολόκληρου του κώδικα), χρησιμοποιούμε ενεργά τον δείκτη z για να επιτύχουμε το επιθυμητό αποτέλεσμα.

FAQ

- Πώς να τοποθετήσετε τα div το ένα μετά το άλλο;Και για αυτό χρησιμοποιούμε την ιδιότητα - float: αριστερά (ή δεξιά, ανάλογα με την ανάγκη), έτσι ώστε η επόμενη div μετά από τέτοιες εναλλακτικές να βρίσκεται κάτω από αυτές, της ορίζουμε την ιδιότητα clear (για παράδειγμα clear: left).

- Πώς να κεντράρετε ένα div;Μια λύση μοιάζει με τον εξής τρόπο- ορίστε margin-αριστερά και margin-right ως auto (ή ακόμα πιο απλά - margin: 0 auto;)

- Πώς να τοποθετήσετε στοιχεία σε ένα div κατακόρυφα;Εξαρτάται από το στοιχείο, για παράδειγμα, για κείμενο, αρκεί απλώς να ορίσετε vertical-align:middle, αλλά για μια εικόνα πρέπει να καθορίσετε το line-height:Npx.

- Εσοχή χρησιμοποιώντας περιθώριο ή γέμιση;Βασικά, το περιθώριο χρησιμεύει για την εσοχή μεταξύ των μπλοκ· είναι μια "εξωτερική" εσοχή, καθώς η γέμιση είναι μια "εσωτερική" εσοχή και χρησιμοποιείται συχνότερα για την οργάνωση της εσοχής γύρω από το κείμενο, για παράδειγμα. Φαίνεται σαν ένα απλό πράγμα, αλλά μερικές φορές μπορεί να συναντήσετε πετράδια όπως ένα πυρίμαχο που δεν μπορούσα να μην το αναφέρω εδώ.

- Μετατόπιση του μπλοκ χρησιμοποιώντας περιθώριο ή θέση:σχετική σε συνδυασμό με οριζόντιες και κάθετες μετατοπίσεις;Φυσικά, σε αυτές τις περιπτώσεις πρέπει να χρησιμοποιήσετε περιθώριο. Είναι αλήθεια ότι, όπως και αλλού, όλα εξαρτώνται από τη συγκεκριμένη περίπτωση, αλλά γενικά θα πρέπει να χρησιμοποιείτε ακόμα περιθώριο.

- Πώς να τεντώσετε ένα div για να χωρέσει τα περιεχόμενα του μπλοκ;Για να το κάνετε αυτό, πρέπει να καθορίσετε ύψος: auto;

Πώς να τεντώσετε ένα div στο ύψος του γονέα του, το οποίο με τη σειρά του εκτείνεται στο ύψος του περιεχομένου του div που βρίσκεται μέσα του, δίπλα στο πρώτο div; Ρυθμίστε το περιεχόμενο div σε ύψος: auto, τα άλλα δύο div σε ύψος: 100% και εμφάνιση: πίνακας.

- Πώς να κάνετε ένα div αόρατο;Με χειρισμό της ιδιότητας εμφάνισης. Για αόρατο, ρυθμίστε το σε κανένα.

- Πώς να κάνετε κύλιση περιεχομένου σε ένα div με στατικό ύψος;Ορίζουμε overflow:scroll στις ιδιότητες.

- Πώς να εμφανίσετε (για παράδειγμα) την ετικέτα "a" ως div (μπλοκ);Στις ιδιότητες, ορίστε το ύψος και το πλάτος και ορίστε το display:block;

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

Ετικέτες: faq, div, διάταξη, tutorial

Κατά τη χάραξη του επόμενου έργου (ή απλώς σχεδιάζοντας ένα πλέγμα διάταξης), πολλοί βρέθηκαν αντιμέτωποι με ένα δίλημμα - να χρησιμοποιήσουν ένα σταθερό πλάτος διάταξης ή ένα "λαστιχένιο" πλέγμα που προσαρμόζεται στο μέγεθος του παραθύρου του προγράμματος περιήγησης.

Κάθε μία από αυτές τις λύσεις έχει τα δικά της πλεονεκτήματα και μειονεκτήματα· θέλω να εστιάσω στα μειονεκτήματα, αφού συνήθως είναι ακριβώς στο να αντικατοπτρίζει κανείς τα μειονεκτήματα αυτών των αποφάσεων που πρέπει να επιλέξει ανάμεσα σε δύο κακά.

Σταθερό πλάτος πλέγματος διάταξης

Η διάταξη αναγκάζεται σε μια οριζόντια διάσταση 960-980 pixel (έτσι ώστε τα πάντα να περιλαμβάνονται στις περισσότερες συσκευές στις περισσότερες αναλύσεις), η οποία με μεγάλα οριζόντια μεγέθη παραθύρων φαίνεται κάπως ψυχρή - μια λεπτή κάθετη λωρίδα χρήσιμου περιεχομένου σελίδας και τεράστια άχρηστα πεδία αχρησιμοποίητος χώρος στα πλαϊνά.

Πλέγμα διάταξης "Καουτσούκ" σε όλο το πλάτος του παραθύρου

Και πάλι, με τα μεγάλα οριζόντια μεγέθη παραθύρων, υπάρχει ένα άλλο πρόβλημα: οι γραμμές του κειμένου γίνονται πολύ μεγάλες και η ανάγνωσή τους δεν γίνεται καθόλου τόσο άνετη όσο θα θέλαμε.
Ένα άλλο κοινό πρόβλημα με αυτήν τη λύση είναι ότι τα πλευρικά περιθώρια με μεγάλα οριζόντια μεγέθη παραθύρων δεν είναι πλέον οπτικά συνεπή με τις οριζόντιες διαστάσεις των στοιχείων, γεγονός που επίσης δεν προσθέτει άνεση όταν κοιτάζετε τη διάταξη.

Θα ήθελα να προτείνω μια απλή λύση - να περιορίσετε το ελάχιστο οριζόντιο μέγεθος σε μια σταθερή τιμή σε pixel και να κάνετε τη μέγιστη σχετική ως ποσοστό του πλάτους του παραθύρου. Αυτή είναι μια πολύ ασήμαντη λύση με απλά μέσα 2 ακόμη εκδόσεις της προδιαγραφής CSS.

Εκσυγχρονίζω:Θα ήθελα να κάνω μια επιφύλαξη ότι δεν μιλάμε για το κλασικό εφέ καουτσούκ και την προσαρμογή σε όλες τις αναλύσεις, αλλά μόνο για ένα συγκεκριμένο εύλογο φάσμα αναλύσεων για το οποίο έχει σχεδιαστεί η διάταξη. Στα παρακάτω παραδείγματα, αυτό είναι το κλασικό εύρος ανάλυσης επιφάνειας εργασίας με οριζόντιο μέγεθος ανάλυσης 1024 pixel.

Να τονίσω ξανά:Η ανάρτηση δεν μιλά για λύση για όλους τους τύπους συσκευών και όλα τα εύρη ανάλυσης. Αυτό το πρόβλημα δεν μπορεί να λυθεί κατ' αρχήν στο πλαίσιο μιας διάταξης., για να το λύσετε με τον ένα ή τον άλλο τρόπο θα απαιτηθούν πολλές διατάξεις. Μύγες χωριστά, κοτολέτες ξεχωριστά.

Δημιουργήστε ένα κοντέινερ διάταξης:
...
Το διακοσμούμε με απλό στυλ στυλ:
div.page-container (ελάχ. πλάτος: 960 εικονοστοιχεία, μέγιστο πλάτος: 75%, περιθώριο: 0 αυτόματο, συμπλήρωση: 0; )
Ωστόσο, αυτή η λύση μπορεί να φαίνεται ανεπαρκής σε κάποιους λόγω του γεγονότος ότι με πολύ μεγάλα οριζόντια μεγέθη παραθύρων, εμφανίζονται και πάλι προβλήματα με το μήκος των γραμμών. Αυτό μπορεί να λυθεί με μια εξίσου απλή πρόσθετη τεχνική: δημιουργία ενός πρόσθετου εξωτερικού δοχείου μέσα σε αυτό που ήδη περιγράφηκε και περιορισμός του μέγιστου πλάτους του σε μια σταθερή τιμή (υποκειμενικά, μου φαίνεται ότι οι τιμές στην περιοχή των 1400-1600 pixel είναι ταιριάζει καλύτερα). Και πάλι χρησιμοποιούμε μόνο Εργαλεία CSS 2.0. Αυτή η λύση, αντί να προσθέτει απλώς το πλάτος ως ποσοστό για το αρχικό κοντέινερ όπως προτείνεται στο πρώτο σχόλιο, θα λειτουργήσει επίσης στον IE, ο οποίος, μέχρι την έκδοση 9, δεν κατανοεί την ταυτόχρονη ένδειξη τιμών.

Προσθήκη HTML:
...

Και αλλάξτε λίγο το CSS:
div.page-container ( max-width: 75%; min-width: 960px; margin: 0 auto; padding: 0; ) div.page-container-inner ( min-width: 960px; max-width: 1600px; margin : 0 αυτόματη, γέμιση: 0; )
Όπως μπορείτε να δείτε, η λύση είναι εξαιρετικά απλή και αρκετά καθολική· μπορεί να χρησιμοποιηθεί για οποιοδήποτε στοιχείο μπλοκ.