Τι δεν γνωρίζετε σχετικά με τον υπολογισμό των περιθωρίων κέρδους στο CSS
Οι περισσότεροι σχεδιαστές ιστοσελίδων πιστεύουν ότι γνωρίζουν καλά το CSS. Εξάλλου, δεν υπάρχουν πολλά γι 'αυτό - μερικοί τύποι επιλογέων, μερικές δωδεκάδες ιδιότητες και μερικούς διαδοχικούς κανόνες που μόλις χρειαστεί να θυμηθείτε από τότε που βράζουν προς την κοινή λογική. Αλλά όταν φτάσετε στο επίπεδο νιτρινο-χαλικιών, υπάρχουν πολλές ασαφείς λεπτομέρειες που ελάχιστοι σχεδιαστές καταλαβαίνουν.
Όταν εξέτασα τα αποτελέσματα μιας δωρεάν δοκιμής CSS που έχω προσφέρει online για τους τελευταίους έξι μήνες, ανακάλυψα μια ερώτηση που σχεδόν Κανένας έχεις δίκιο. Από τις χιλιάδες ανθρώπων που πήραν τη δοκιμή, λιγότεροι από 14% το πήραν σωστά.
Το ερώτημα είναι το εξής: Πώς υπολογίζετε τα ποσοστά περιθωρίων?
Το ερώτημα
Πείτε ότι ο ιστότοπός σας έχει ένα κοντέινερ div, και μέσα σε αυτό, ένα περιεχόμενο div:
Τώρα, ας δώσουμε αυτό το περιεχόμενο div ένα ανώτερο περιθώριο:
.περιεχόμενο margin-top: 10%;
Εντάξει, έτσι είναι 10% ... αλλά το 10% του τι? Αυτό είναι το ερώτημα μόνο το 13,8% των ανθρώπων μπορεί να απαντήσει σωστά. Και να έχετε κατά νου: οι άνθρωποι αυτοί έχουν πρόσβαση στο Google!
Αυτό που μου αρέσει γι 'αυτή την ερώτηση είναι αυτό φαίνεται ότι η απάντηση πρέπει να είναι προφανής. Τόσο πολύ, ότι υποψιάζομαι ότι οι περισσότεροι άνθρωποι παίρνουν μια εικασία (και μαντέψουν λάθος). Αλλά ίσως δεν το κάνει σας φανεί προφανές. Θέλω να πω, αν χρησιμοποιείτε πραγματικά τη φαντασία σας, υπάρχουν πολλοί τρόποι με τους οποίους ο περιηγητής μπορεί να υπολογίσει περιθώριο όπως αυτό.
Λοιπόν, πώς να το περιορίσω για σας, δεδομένου ότι η ερώτηση στο τεστ είναι στην πραγματικότητα πολλαπλή επιλογή. Εδώ είναι οι επιλογές σας:
- 10% του ύψους του περιεχομένου
- 10% του ύψους του διαμερίσματος
- 10% του πλάτους του περιεχομένου div
- 10% του πλάτους του διαμερίσματος
Να θυμάστε ότι μόνο το 13,8% των ανθρώπων μπορεί να επιλέξει τη σωστή απάντηση από αυτήν τη λίστα. Αυτό είναι χειρότερο από την τύχη!
Κοιτάξτε προσεκτικά τις απαντήσεις. θα δείτε ότι υπάρχουν μόνο δύο πράγματα που πρέπει να ξέρετε:
Δοχείο ή Περιεχόμενο?
Πρώτον, είναι το μέγεθος του περιθωρίου βάσει του μεγέθους του ίδιου του περιεχομένου ή του μεγέθους του διαμερίσματος?
Τώρα αυτό δεν είναι ένα gimme, αλλά ίσως να εμπιστεύεστε τα ένστικτά σας. Αν θέσω ένα div να είναι το 50% του πλάτους του κοντέινερ και τότε θέλω τα αριστερά και δεξιά περιθώρια του να γεμίσουν το υπόλοιπο διάστημα, φυσικά θα τα ορίσω σε 25% το καθένα (έτσι τα ποσοστά να ανέρχονται στα 100%). Για να λειτουργήσει αυτό, τα ποσοστιαία περιθώρια πρέπει να βασίζονται στις διαστάσεις του δοχείου.
Σίγουρα, τα δύο τρίτα των ανθρώπων που κάνουν τη δοκιμή παίρνουν αυτό το μέρος της απάντησης σωστά.
Πλάτος ή Ύψος?
Δεύτερος, είναι το μέγεθος περιθωρίου κορυφής με βάση το πλάτος ή το ύψος αυτού του στοιχείου?
Εάν έχετε δώσει προσοχή, είστε πιθανότατα στην φρουρά σας ήδη. Για τόσο λίγους ανθρώπους να επιλέξουν τη σωστή απάντηση, αυτό πρέπει να είναι μια ερώτηση για τέχνασμα, σωστά?
Και όμως, σίγουρα δεν μπορείς να το πιστέψεις η απάντηση δεν είναι ύψος. Λοιπόν, δεν είναι.
Ναι, μιλάμε για ένα κορυφαίο περιθώριο εδώ. Ναι, το μέγεθος αυτού του περιθωρίου είναι μια κατακόρυφη μέτρηση. Ναι, αν ένα τεμάχιο είναι το 50% του ύψους του δοχείου του και του δώσατε ένα ανώτατο περιθώριο 25%, θα περίμενετε να είναι το 25% του ύψους του δοχείου. Και εσείς θα λάθος.
Μην αισθάνεστε άσχημα αν νομίζατε ότι έπρεπε να είναι ύψος. Σχεδόν το 80% των ατόμων που λαμβάνουν τη δοκιμή συμφωνούν μαζί σας:
Κάνει Sense ... Όχι, Πραγματικά!
Ακόμα δεν το πιστεύετε; Ακολουθεί ένα απόσπασμα από την προδιαγραφή CSS του W3C:
Το ποσοστό υπολογίζεται σε σχέση με το πλάτος του μπλοκ που περιέχει το παραγόμενο κουτί. Σημειώστε ότι αυτό ισχύει και για το περιθώριο κέρδους και για το περιθώριο κέρδους.
Το ίδιο ισχύει και για την επένδυση από πάνω και κάτω, σε περίπτωση που αναρωτιέστε. Όσον αφορά τα σύνορα, είναι παράνομο να καθορίσετε το πλάτος τους ως ποσοστό.
Έτσι σε αυτό το σημείο, μάλλον σκέφτεστε ότι οι δημιουργοί του CSS είναι είτε bonkers, ή απλώς έκαναν ένα πραγματικά χαζό λάθος. Αλλά είμαι εδώ για να σας πω, υπάρχουν δύο βάσιμοι λόγοι για να βάλετε κατακόρυφα περιθώρια στο πλάτος του μπλοκ που περιέχει:
Οριζόντια και κάθετη συνέπεια
Υπάρχει, φυσικά, μια ιδιότητα στενογραφίας που σας επιτρέπει να καθορίσετε το περιθώριο και για τις τέσσερις πλευρές ενός μπλοκ:
περιθώριο: 10%.
Αυτό επεκτείνεται σε:
περιθώριο: 10%. περιθώριο-δεξιά: 10%. περιθώριο κάτω: 10%. αριστερό περιθώριο: 10%.
Τώρα, εάν γράψατε κάποια από τα παραπάνω, θα περίμενε κανείς ότι τα περιθώρια και στις τέσσερις πλευρές του μπλοκ θα είναι ίσου μεγέθους, έτσι δεν είναι; Αν όμως το περιθώριο-άκρο και το περιθώριο-δεξιά βασίζονταν στο πλάτος του δοχείου και το κατώτατο όριο και το κατώτατο όριο περιθωρίου βασίστηκαν στο ύψος του, τότε θα ήταν συνήθως διαφορετικά!
Αποφυγή της κυκλικής εξάρτησης
Το CSS καθορίζει το περιεχόμενο σε μπλοκ στοιβάζονται κάθετα προς τα κάτω στη σελίδα, έτσι ώστε το πλάτος ενός μπλοκ συνήθως υπαγορεύεται εξ ολοκλήρου από το πλάτος του γονέα του. Με άλλα λόγια, μπορείτε υπολογίστε το πλάτος ενός μπλοκ χωρίς να ανησυχείτε για το τι είναι μέσα αυτό το μπλοκ.
Το ύψος ενός μπλοκ είναι ένα διαφορετικό θέμα. Συνήθως, το ύψος εξαρτάται από το συνδυασμένο ύψος των περιεχομένων του. Αλλάξτε το ύψος του περιεχομένου και αλλάξτε το ύψος του μπλοκ. Δείτε το πρόβλημα?
Για να αποκτήσετε το ύψος του περιεχομένου, πρέπει να γνωρίζετε τα επάνω και κάτω περιθώρια που εφαρμόζονται σε αυτό. Και αν αυτά τα περιθώρια εξαρτώνται από το ύψος του γονικού μπλοκ, έχετε πρόβλημα, επειδή δεν μπορείτε να υπολογίσετε ένα χωρίς να γνωρίζετε το άλλο!
Βάση κάθετων περιθωρίων στο πλάτος του δοχείου διακόπτει αυτήν την κυκλική εξάρτηση και καθιστά δυνατή τη διαμόρφωση της σελίδας.
Άσε την τάξη
Έτσι, το έχετε εδώ: την πιο δύσκολη ερώτηση σχετικά με τη δοκιμή, και τώρα μπορείτε να απαντήσετε. Θέλετε να μάθετε πώς θα κάνατε το υπόλοιπο της δοκιμής; Δοκιμάστε τον εαυτό σας. Υπόσχομαι, οι περισσότερες από τις ερωτήσεις είναι πολύ ευκολότερες από αυτό.
Εν τω μεταξύ, ψάχνω για μια νέα σκληρότερη ερώτηση! Τι λεπτομέρεια του CSS νομίζετε ότι κανείς δεν ξέρει?
Σημείωση του συντάκτη: Αυτό γράφτηκε για το Hongkiat.com από Κέβιν Γκάνκ. Ο Kevin έχει γράψει για τον ιστό από το 1999, με τα ονόματα των βιβλίων για PHP, CSS και JavaScript. Επίσης, φιλοξένησε podcasts, μίλησε σε συνέδρια και παρήγαγε εκπαίδευση βίντεο, όλα σχετικά με τον Ιστό. Είναι επικεφαλής της ομάδας ανάπτυξης στο Sit the Test, μια διαδικτυακή εφαρμογή για τη διεξαγωγή online δοκιμών.
Περισσότερα για το Hongkiat:
- Σχεδίαση ιστού: Ίσα Ύψος στήλης με CSS
- 6 κόλπα CSS για την ευθυγράμμιση του περιεχομένου κάθετα
- Μια εμφάνιση σε μονάδες CSS: Εικονοστοιχεία, EM και Ποσοστό
- Μια ματιά σε: CSS3 Box-size
Τώρα διαβάστε: 10 κρυφές ιδιότητες CSS3 που πρέπει να ξέρετε
