Η ιδιότητα πλάτους CSS ορίζει το πλάτος της περιοχής περιεχομένου του στοιχείου. Αυτή η περιοχή είναι το διάστημα μεταξύ του περιγράμματος, της επένδυσης και του περιθωρίου ενός στοιχείου. Επιπλέον, η ιδιότητα πλάτους CSS με την τιμή ' κατάλληλο περιεχόμενο ” θα προσαρμόσει το πλάτος του στοιχείου ανάλογα με το περιεχόμενο.
Αυτή η μελέτη θα εξηγήσει την ιδιότητα πλάτους CSS με την τιμή fit-content.
Πώς να χρησιμοποιήσετε την ιδιότητα πλάτους CSS με τιμή fit-content;
Για να χρησιμοποιήσετε την ιδιότητα πλάτους CSS με τιμή προσαρμογής περιεχομένου, ελέγξτε τη δεδομένη σύνταξη:
πλάτος: κατάλληλο περιεχόμενο
Παράδειγμα
Σε HTML, προσθέστε τρία στοιχεία div με το ίδιο όνομα κλάσης ' κουτί 'και τρεις διαφορετικές τάξεις' χρώμα-1 », « χρώμα-2 ', και ' χρώμα-3 », αντίστοιχα. Προσθέστε στοιχείο
μέσα σε κάθε div για να προσθέσετε περιεχόμενο στην ιστοσελίδα:
< div τάξη = 'χρώμα κουτιού-1' >
< Π > Περιεχόμενο προσαρμογής σε πλάτος CSS Π >
div >
< div τάξη = 'χρώμα κουτιού-2' >
< Π > Γειά σου Κόσμε ! Π >
div >
< div τάξη = 'χρώμα κουτιού-3' >
< Π > Η ομαδική εργασία ξεκινά με την οικοδόμηση εμπιστοσύνης. Είμαστε μια ομάδα που δουλεύει Για κοινή αποστολή. Π >
div >
Ακολουθεί η έξοδος του κώδικα HTML:
Μέχρι στιγμής, έχουμε συζητήσει τη σελίδα HTML. Τώρα, στην επόμενη ενότητα, θα εφαρμόσουμε διαφορετικά στυλ CSS στα στοιχεία HTML για να τα κάνουμε να φαίνονται καλύτερα. Στο συνεχιζόμενο παράδειγμα, θα ελέγξουμε τη συμπεριφορά του ' πλάτος «Ακίνητο που έχει την αξία» κατάλληλο περιεχόμενο ' στο CSS.
Στυλ 'box' div
.κουτί {πλάτος: κατάλληλο περιεχόμενο.
ύψος: 50 px;
χρώμα: ghostwhite;
padding: 6px;
περιθώριο: 2px;
μέγεθος γραμματοσειράς: 18 px;
}
Ο ' .κουτί ” αναφέρεται στο πλαίσιο κλάσης div. Παρακάτω είναι οι ιδιότητες που εφαρμόζονται σε αυτό:
-
- ' πλάτος “ακίνητο με την αξία” κατάλληλο περιεχόμενο ” χρησιμοποιεί τον διαθέσιμο χώρο, αλλά δεν θα υπερβαίνει το περιεχόμενο.
- ' ύψος ” είναι η ιδιότητα που καθορίζει το ύψος του στοιχείου.
- ' χρώμα ' ορίζει το χρώμα της γραμματοσειράς του στοιχείου.
- ' υλικό παραγεμίσματος Η ιδιότητα ' παράγει χώρο εντός του περιγράμματος του στοιχείου ή γύρω από το περιεχόμενο.
- ' περιθώριο ” καθορίζει το χώρο γύρω από το στοιχείο.
- ' μέγεθος γραμματοσειράς Η ιδιότητα ' καθορίζει το μέγεθος της γραμματοσειράς.
Στυλ 'color-1' div
.χρώμα- 1 {χρώμα του φόντου: #00ABB3;
}
Ο ' χρώμα του φόντου 'η ιδιότητα έχει οριστεί σε ' .χρώμα-1 ” div.
Στυλ 'color-2' div
.χρώμα- 2 {χρώμα του φόντου: #083AA9;
}
Στυλ 'color-3' div
χρώμα του φόντου: #4C6793;
}
Μπορεί να παρατηρηθεί ότι το πλάτος του στοιχείου ορίζεται ίσο με το περιεχόμενο:
Αυτό είναι υπέροχο! Έχουμε μάθει με επιτυχία τη χρήση του CSS ' πλάτος “ακίνητο με την αξία” κατάλληλο περιεχόμενο '.
συμπέρασμα
Η ιδιότητα πλάτους CSS μας επιτρέπει να χρησιμοποιήσουμε πολλές τιμές. Αυτές οι τιμές είναι σε ποσοστό, pixel ή περισσότερα. Για να το ρυθμίσετε σύμφωνα με το περιεχόμενο, το ' κατάλληλο περιεχόμενο ” μπορεί να οριστεί η τιμή. Αυτή η ανάρτηση έχει περιγράψει την ιδιότητα πλάτους CSS με την τιμή fit-content με μια πρακτική επίδειξη.