CSS Κέλυφος
- Προηγούμενη Σελίδα Υψος/Πλάτος CSS
- Επόμενη Σελίδα Κάθετος CSS
CSS Κέλυφος
Όλα τα στοιχεία HTML μπορούν να θεωρηθούν ως πλαίσια. Στο CSS, όταν μιλάμε για σχεδιασμό και διαμόρφωση, χρησιμοποιούμε τον όρο "μο델 κουτί" ή "μο델 πλαισίου".
Το μοντέλο κουτίου του CSS είναι στην πραγματικότητα ένα κουτί που περιβάλλει κάθε στοιχείο HTML. Περιλαμβάνει: τα περιθώρια, τα σύνορα, τα περιθώρια και το πραγματικό περιεχόμενο. Η εικόνα που ακολουθεί δείχνει το μοντέλο κουτίου:
Περιγραφή των διαφόρων τμημάτων:
- Περιεχόμενο - Το περιεχόμενο του κουτιού, όπου εμφανίζεται κείμενο και εικόνες.
- Περιθώρια - Καθαρίζει την περιοχή γύρω από το περιεχόμενο. Τα περιθώρια είναι διαφανή.
- Σύνορα - Περιβάλλει τα σύνορα του περιεχομένου και των περιθωρίων.
- Περιθώρια - Καθαρίζει την περιοχή πέρα από τα σύνορα. Τα περιθώρια είναι διαφανή.
Το μοντέλο κουτίου επιτρέπει την προσθήκη σωμάτων γύρω από το στοιχείο και τη διαμόρφωση του χώρου μεταξύ των στοιχείων.
Η πιο εσωτερική περιοχή του στοιχείου κουτί είναι το πραγματικό περιεχόμενο, το οποίο περιβάλλεται από τα περιθώρια. Τα περιθώρια παρουσιάζουν το παρα后台 του στοιχείου. Η κύρια γραμμή των περιθωρίων είναι το σύνορο. Εξωτερικά από τα σύνορα είναι τα περιθώρια, τα οποία είναι προεπιλεγμένα διαφανή και δεν καλύπτουν κανένα στοιχείο πίσω τους.
Σημείωση:Το χρώμα του παρα后台 εφαρμόζεται στην περιοχή που αποτελείται από το περιεχόμενο, τα περιθώρια και τα σύνορα.
Τα περιθώρια, τα σύνορα και οι εξωτερικές γειτόνισες είναι προαιρετικά και η προεπιλεγμένη τιμή είναι μηδέν. Ωστόσο, πολλές στοιχεία θα ρυθμιστούν από το πρότυπο χρήστη του περιηγητή. Μπορείτε να καλύψετε αυτά τα στυλ περιηγητή ρυθμίζοντας τα margin και padding του στοιχείου σε μηδέν. Αυτό μπορεί να γίνει ξεχωριστά ή να χρησιμοποιηθεί ο γενικός επιλογέας για να ρυθμίσετε όλα τα στοιχεία:
* {
margin: 0;
padding: 0;
}
Στο CSS, τα width και height αναφέρονται στο πλάτος και το ύψος της περιοχής περιεχομένου. Η αύξηση των περιθωρίων, των συνορίων και των εξωτερικών γειτόνισων δεν επηρεάζει το μέγεθος της περιοχής περιεχομένου, αλλά αυξάνει το συνολικό μέγεθος του στοιχείου κουτί.
Ας υποθέσουμε ότι κάθε πλευρά του κουτιού έχει εξωτερικά περιθώρια 10 pixel και εσωτερικά περιθώρια 5 pixel. Αν θέλετε να φτάσουμε σε μέγεθος 100 pixel για αυτό το στοιχείο κουτί, πρέπει να ρυθμίσετε το πλάτος του περιεχομένου σε 70 pixel. Δείτε την εικόνα:
#box {
width: 70px;
margin: 10px;
padding: 5px;
}
Σημείωση:Τα περιθώρια, τα σύνορα και οι εξωτερικές γειτόνισες μπορούν να εφαρμοστούν σε όλες τις πλευρές ενός στοιχείου, αλλά και σε ξεχωριστές πλευρές.
Σημείωση:Οι εξωτερικές γειτόνισες μπορούν να είναι αρνητικές και σε πολλές περιπτώσεις χρησιμοποιούνται αρνητικές εξωτερικές γειτόνισες.
Παράδειγμα
Παρουσίαση μοντέλου κουτίου:
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
Πλάτος και ύψος στοιχείου
Για να ρυθμίσετε σωστά το πλάτος και το ύψος του στοιχείου σε όλους τους περιηγητές, πρέπει να κατανοήσετε πώς λειτουργεί το μοντέλο κουτί.
Σημαντική ένδειξη:Όταν χρησιμοποιείτε το CSS για να ρυθμίσετε τις ιδιότητες width και height ενός στοιχείου, πρέπει να ρυθμίσετε το πλάτος και το ύψος της περιοχής περιεχομένου. Για να υπολογίσετε το πλήρες μέγεθος του στοιχείου, πρέπει επίσης να προσθέσετε τα περιθώρια, τα σύνορα και τις εξωτερικές γειτόνισες.
Παράδειγμα
<div> ο συνολικός πλάτος του στοιχείου θα είναι 350px:
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
Υπολογισμός ως εξής:
320px (πλάτος) + 20px (αριστερό + δεξί εσωτερικό περιθώριο) + 10px (αριστερό + δεξί περιθώριο) + 0px (αριστερό + δεξί εξωτερικό περιθώριο) = 350px
Η συνολική πλάτος του στοιχείου πρέπει να υπολογίζεται ως εξής:
Η συνολική πλάτος του στοιχείου = πλάτος + επέκταση αριστερού εσωτερικού περιθώρου + επέκταση δεξιού εσωτερικού περιθώρου + επέκταση αριστερού περιθωρίου + επέκταση δεξιού περιθωρίου + επέκταση αριστερού εξωτερικού περιθωρίου + επέκταση δεξιού εξωτερικού περιθωρίου
Η συνολική ύψος του στοιχείου πρέπει να υπολογίζεται ως εξής:
Η συνολική ύψος του στοιχείου = ύψος + επέκταση επάνω εσωτερικού περιθώρου + επέκταση κάτω εσωτερικού περιθώρου + επέκταση επάνω περιθωρίου + επέκταση κάτω περιθωρίου + επέκταση επάνω εξωτερικού περιθωρίου + επέκταση κάτω εξωτερικού περιθωρίου
- Προηγούμενη Σελίδα Υψος/Πλάτος CSS
- Επόμενη Σελίδα Κάθετος CSS
