Όλα τα στοιχεία HTML μπορούν να θεωρηθούν ως πλαίσια.
Στο CSS, ο όρος "μοντέλο κουτιού" χρησιμοποιείται όταν μιλάμε για σχεδιασμό και διάταξη.
Το μοντέλο πλαισίου CSS είναι ουσιαστικά ένα πλαίσιο που τυλίγεται γύρω από κάθε στοιχείο HTML. Αποτελείται από: περιθώρια, περιγράμματα, padding και το πραγματικό περιεχόμενο. Η παρακάτω εικόνα απεικονίζει το μοντέλο κουτιού:
Επεξήγηση των διαφόρων τμημάτων:
Περιεχόμενο - Το περιεχόμενο του πλαισίου, όπου εμφανίζονται κείμενο και εικόνες
Γέμισμα - Καθαρίζει μια περιοχή γύρω από το περιεχόμενο. Η επένδυση είναι διαφανής
Περίγραμμα - Ένα περίγραμμα που περιβάλλει το padding και το περιεχόμενο
Περιθώριο - Εκκαθαρίζει μια περιοχή εκτός των συνόρων. Το περιθώριο είναι διαφανής
Το μοντέλο πλαισίου μας επιτρέπει να προσθέσουμε ένα περίγραμμα γύρω από στοιχεία και να ορίσουμε χώρο μεταξύ στοιχείων.
Επίδειξη του μοντέλου κουτιού:
div {
width: 300px;
border: 15px solid
green;
padding: 50px;
margin: 20px;
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.</p>
<div>This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</body>
</html>
Για να ρυθμίσετε σωστά το πλάτος και το ύψος ενός στοιχείου σε όλα τα προγράμματα περιήγησης, πρέπει να γνωρίζετε πώς λειτουργεί το μοντέλο πλαισίου.
Σημαντικό: Όταν ορίζετε τις ιδιότητες πλάτους και ύψους ενός στοιχείο με CSS, απλώς ορίζετε το πλάτος και το ύψος της περιοχής περιεχομένου. Προς την υπολογίστε το πλήρες μέγεθος ενός στοιχείου, πρέπει επίσης να προσθέσετε γέμιση, περιθώρια και περιθώρια.
Αυτό το στοιχείο <div> θα έχει συνολικό πλάτος 350 px:
div { width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 320px;
height: 50px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>
<h2>Calculate the total width:</h2>
<img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">
<div>The picture above is 350px wide. The total width of this element is also 350px. The total height of this element is 80px.</div>
</body>
</html>
Εδώ είναι ο υπολογισμός:
320 εικονοστοιχεία (πλάτος)
+ 20 εικονοστοιχεία (αριστερά + δεξιά αναπλήρωση)
+ 10 εικονοστοιχεία (αριστερό + δεξί περίγραμμα)
+ 0px (αριστερό + δεξί περιθώριο)
= 350 εικονοστοιχεία
Το συνολικό πλάτος ενός στοιχείου πρέπει να υπολογίζεται ως εξής:
Συνολικό πλάτος στοιχείου=πλάτος + αριστερή συμπλήρωση + δεξιά επένδυση + αριστερά περίγραμμα + δεξί περίγραμμα + αριστερό περιθώριο + δεξί περιθώριο
Το συνολικό ύψος ενός στοιχείου πρέπει να υπολογίζεται ως εξής:
Συνολικό ύψος στοιχείου=ύψος + επάνω επένδυση + κάτω επένδυση + επάνω περίγραμμα + κάτω περίγραμμα + επάνω περιθώριο + κάτω περιθώριο
Σημείωση: Η ιδιότητα περιθωρίου επηρεάζει επίσης τον συνολικό χώρο του πλαισίου θα καταληφθεί στη σελίδα, αλλά το περιθώριο δεν περιλαμβάνεται στο πραγματικό μέγεθος του το κιβώτιο. Το συνολικό πλάτος και ύψος του κουτιού σταματά στο περίγραμμα.