Σύντομες θεωρητικές πληροφορίες. Πράγματα που πρέπει να θυμάστε

Περιγραφή

Για να αλλάξετε το μέγεθος μιας εικόνας χρησιμοποιώντας HTML, παρέχονται τα χαρακτηριστικά ύψους και πλάτους. Μπορείτε να χρησιμοποιήσετε τιμές σε pixel ή ποσοστά. Εάν έχει οριστεί συμβολισμός ποσοστού, τότε οι διαστάσεις της εικόνας υπολογίζονται σε σχέση με το γονικό στοιχείο - το κοντέινερ όπου βρίσκεται η ετικέτα . Εάν δεν υπάρχει γονικό κοντέινερ, το παράθυρο του προγράμματος περιήγησης λειτουργεί ως γονικό κοντέινερ. Με άλλα λόγια, το width="100%" σημαίνει ότι η εικόνα θα εκτείνεται σε όλο το πλάτος της ιστοσελίδας. Η προσθήκη μόνο ενός χαρακτηριστικού πλάτους ή ύψους διατηρεί την αναλογία διαστάσεων και την αναλογία διαστάσεων της εικόνας. Στη συνέχεια, το πρόγραμμα περιήγησης περιμένει την πλήρη φόρτωση της εικόνας για να προσδιορίσει το αρχικό ύψος και πλάτος της.

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

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

Σύνταξη

HTML
XHTML

Αξίες

Οποιοσδήποτε θετικός ακέραιος σε pixel ή ποσοστά.

Προεπιλεγμένη τιμή

Το αρχικό πλάτος της εικόνας.

HTML5 IE Cr Op Sa Fx

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

Κείμενο πρώτης παραγράφου

Δεύτερο κείμενο

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

Ας κάνουμε τώρα την πρώτη αλλαγή και ας κωδικοποιήσουμε το πλάτος της πρώτης παραγράφου (width:50px):

Κείμενο του πρώτου

Δεύτερο κείμενο

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

Ας περιορίσουμε όμως τώρα το ύψος του δοχείου με ύψος:15px επίσης.

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

Υπερχείλιση σημαίνει «υπερχείλιση» ή, με άλλα λόγια, «υπερχείλιση περιεχομένου». Λέει τι πρέπει να συμβεί με το περιεχόμενο εάν δεν ταιριάζει στην περιοχή (κοντέινερ) που του έχει εκχωρηθεί.

Η υπερχείλιση έχει πολλές έγκυρες τιμές, αλλά η προεπιλογή είναι ορατός (εμφάνιση):

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

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

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

Για παράδειγμα, στην περίπτωση χρήσης υπερχείλισης:auto, θα μπορούμε να κάνουμε κύλιση μόνο κατά μήκος του άξονα όπου το περιεχόμενο δεν χωράει εντός των ορίων του κοντέινερ:

Κείμενο του πρώτου

Δεύτερο κείμενο

Συνοψίζοντας, μπορούμε να πούμε ότι το Overflow επιτρέπει αρκετά προσαρμόστε ευέλικτα τις επιλογές εμφάνισης περιεχομένουσε περίπτωση που σκαρφαλώσει από το δοχείο του. Θα έχετε την ευκαιρία να εμφανίσετε το περιεχόμενο που έχει απομείνει (ορατό), να μην εμφανίζεται (περικοπή - κρυφό), ή να κάνετε υποχρεωτική κύλιση (κύλιση) ή κύλιση όπως απαιτείται (αυτόματη).

Υπάρχουν και άλλες επιλογές για τη σύνταξη αυτού του κανόνα που σχετίζονται με το CSS3, οι οποίες όμως υποστηρίζονται από όλα τα προγράμματα περιήγησης, πράγμα που σημαίνει ότι μπορούν να χρησιμοποιηθούν με ασφάλεια. Μιλάω για τις επιλογές υπερχείλιση-x και υπερχείλιση-y, που σας επιτρέπουν να ορίσετε ή να μην ορίσετε την κύλιση κατά μήκος μεμονωμένων αξόνων (το x είναι οριζόντιο, το y είναι κάθετο).

Εάν, για παράδειγμα, πρέπει να βεβαιωθείτε ότι η οριζόντια κύλιση δεν εμφανίζεται ποτέ και η κατακόρυφη κύλιση εμφανίζεται μόνο όταν είναι απαραίτητο (αν το περιεχόμενο δεν ταιριάζει), τότε για το στοιχείο Html θα χρειαστεί να γράψετε overflow-x: hidden and overflow- y: αυτόματο . Όλα, η εργασία θα λυθεί, επειδή αυτή η προσποίηση υποστηρίζεται από όλα τα προγράμματα περιήγησης.

Ύψος και πλάτος ως ποσοστό - γιατί χρειαζόμαστε ένα doctype

Τώρα ας μιλήσουμε για το από τι υπολογίζεται το ποσοστό πλάτους. Θυμηθείτε, στην αρχή του άρθρου, υποσχέθηκα να εστιάσω την προσοχή μας σε αυτό. Λοιπόν, στην πραγματικότητα, το πλάτος του κανόνα CSS δεν αποτελεί εξαίρεση εδώ και, όπως ακριβώς το padding και το margin, υπολογίζεται ως ποσοστό του οριζόντιου μεγέθους του κοντέινερ περιεχομένου.

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

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

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

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

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

Ένα έγγραφο που δεν έχει doctype θα εμφανίζεται στο πρόγραμμα περιήγησης σαν να ήταν πολύ παλιό (αντίκα). Εάν προσθέσετε μια δήλωση στο ίδιο έγγραφο, τότε το πρόγραμμα περιήγησης θα απορρίψει ήδη την πατίνα της αρχαιότητας και θα αρχίσει να εργάζεται με τον κωδικό του εγγράφου σύμφωνα με όλα τα επί του παρόντος αποδεκτά πρότυπα.

Όμως η έννοια της αρχαιότητας είναι πολύ διαφορετική. Τι είδους αρχαιότητα, για παράδειγμα, μπορεί να έχει τώρα ένα δημοφιλές πρόγραμμα περιήγησης; Google Chrome, που εμφανίστηκε μόλις το 2008; Ο IE, φυσικά, έχει μια αρκετά πλούσια ιστορία. Επομένως, όλα τα προγράμματα περιήγησης οποιασδήποτε έκδοσης θα εμφανίζουν το έγγραφο χωρίς δήλωση (σε λειτουργία ιδιορρυθμίας ή κόλπα) με τον ίδιο τρόπο που θα έκανε το παλιό, επειδή αυτή η έκδοση θεωρείται η βασική.

Γιατί μίλησα για τις λειτουργίες εμφάνισης του προγράμματος περιήγησης για τόσο καιρό; Επειδή όμως για αυτές τις δύο λειτουργίες, η ρύθμιση του ύψους (ύψους) της περιοχής περιεχομένου ως ποσοστό είναι πολύ διαφορετική σε σχέση με τον υπολογισμό αυτού του ύψους.

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

Εάν η δήλωση doctype αφαιρεθεί από τον κωδικό του εγγράφου, τότε θα δούμε την ακόλουθη εικόνα:

Για τη λειτουργία που ακολουθεί τα πρότυπα (η δήλωση είναι γραμμένη στην αρχή του εγγράφου), πρέπει πρώτα να ορίσετε το ύψος του κοντέινερ (στην περίπτωσή μας, η ετικέτα Body θα χρησιμεύσει ως κοντέινερ για το Div) και μόνο μετά το πρόγραμμα περιήγησης θα επεξεργαστεί σωστά ύψος: 100%:

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

Εάν ορίσετε για οποιοδήποτε ύψος και πλάτος στοιχείου Html για την περιοχή περιεχομένου και καθορίσετε επίσης το padding και το πλάτος πλαισίου (περίγραμμα) για αυτήν την ετικέτα, τότε στη λειτουργία quirks (χωρίς γραπτή δήλωση) στο διαφορετικά προγράμματα περιήγησηςόλα αυτά μπορούν να ερμηνευθούν με διαφορετικούς τρόπους.

Στο παλιό πρόγραμμα περιήγησης IE 5.5, το πλάτος της συμπλήρωσης και του περιγράμματος θα υπολογίζεται προς τα μέσα από τα μεγέθη που καθορίζονται μέσω του ύψους και του πλάτους. Εκείνοι. το συνολικό μέγεθος του στοιχείου θα ταιριάζει με αυτό που καθορίζεται σε αυτά Ιδιότητες CSS(πρόκειται για ένα απαρχαιωμένο σύστημα που δεν χρησιμοποιείται πλέον).

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

Λοιπόν, εάν μια οδηγία είναι γραμμένη στο έγγραφο, τότε σε όλα τα σύγχρονα και παλιά προγράμματα περιήγησης αυτά τα προβλήματα με τη δυαδικότητα της προσέγγισης μπορούν ήδη να αποφευχθούν εύκολα. Σε αυτήν την περίπτωση, και στον IE 5.5, η ποσότητα του padding και το πλάτος περιγράμματος θα προστεθούν στο μέγεθος της περιοχής περιεχομένου, όπως απαιτείται από τα σύγχρονα πρότυπα CSS. Επομένως, προκειμένου να αποφευχθεί γράφετε πάντα doctype.

Καλή σου τύχη! Τα λέμε σύντομα στον ιστότοπο των σελίδων του ιστολογίου

Μπορεί να σας ενδιαφέρει

Θέση (απόλυτη, σχετική και σταθερή) - τρόποι τοποθέτησης στοιχείων Html στο CSS (κανόνες αριστερά, δεξιά, επάνω και κάτω)
Float and clear in CSS - block layout tools
Επένδυση, περιθώριο και περίγραμμα - ορίζουμε εσωτερικές και εξωτερικές επενδύσεις CSS, καθώς και περιγράμματα για όλες τις πλευρές (πάνω, κάτω, αριστερά, δεξιά)
Τοποθέτηση με Z-index και κανόνα CSS Cursor για αλλαγή του δρομέα του ποντικιού
Σε τι χρησιμεύει το CSS, πώς να συνδέσετε επικαλυπτόμενα φύλλα στυλ έγγραφο htmlκαι βασική σύνταξη αυτής της γλώσσας
Επιλογείς ετικετών, κλάσης, αναγνωριστικού και γενικής χρήσης, καθώς και επιλογείς χαρακτηριστικών στο σύγχρονο CSS Διαφορετικό σχέδιο για εσωτερικό και εξωτερικοί σύνδεσμοιμέσω CSS
Προτεραιότητες σε Css και αύξησή τους λόγω Σημαντικό, συνδυασμός και ομαδοποίησης επιλογέων, στυλ χρήστη και συγγραφέα
Εμφάνιση (μπλοκ, κανένα, ενσωματωμένο) σε CSS - ορίστε τον τύπο εμφάνισης των στοιχείων Html σε μια ιστοσελίδα
Μονάδες μεγέθους (Pixel, Em και Ex) και Διαδοχή κανόνων στο CSS

Γειά σου, αγαπητέ αναγνώστη.

Αυτό είναι το ενδέκατο μάθημα εκμάθηση CSS. Σε αυτό το μάθημα, θα εξετάσουμε μόνο δύο απλές αλλά σημαντικές ιδιότητες. Αυτές οι ιδιότητες είναι υπεύθυνες για το ύψος και το πλάτος του μπλοκ.

Πριν μελετήσετε αυτό το μάθημα, διαβάστε τα προηγούμενα μαθήματα:

Θεωρία και πράξη

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

Και σε CSS για κάθε μπλοκ