Σχεδιασμός Γραφικής Οθόνης - Πλάτος και max-width CSS

Χρήση width, max-width και margin: auto;

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

Ρύθμιση του πλάτους του στοιχείου πλάτος Θα εμποδίσει την επέκτασή του στα όρια του κουτιού του. Στη συνέχεια, μπορείτε να ρυθμίσετε την περιθωρία σε auto για να το στοιχείο να κεντρώνεται οριζόντια μέσα στο κουτί του. Το στοιχείο θα καταλαμβάνει το καθορισμένο πλάτος και το υπόλοιπο χώρος θα κατανέμεται ισόμετρα μεταξύ των δύο περιθωρίων:

Το πλάτος του στοιχείου <div> είναι 500px, και η περιθωρία έχει ρυθμιστεί σε auto.

Σημείωση:Ο περιηγητής του φυλλαδίου είναι μικρότερος από το πλάτος του στοιχείου <div> θα προκαλέσει προβλήματα. Ο περιηγητής θα προσθέσει μια γραμμή κύλισης οριζόντια στη σελίδα.

Σε αυτή την περίπτωση, η χρήση max-width Μπορεί να βελτιώσει την επεξεργασία του περιηγητή σε μικρά παράθυρα. Αυτό είναι πολύ σημαντικό για να κάνει τον ιστότοπο διαθέσιμο σε μικρά συσκευές:

Το μέγιστο πλάτος του στοιχείου <div> είναι 500px και ο περιθώριο είναι ρυθμισμένος σε auto.

Σημείωση:Προσαρμόστε το μέγεθος του παραθύρου περιήγησης σε λιγότερο από 500 εικονοστοιχεία για να δείτε τη διαφορά μεταξύ των δύο div!

Αυτό είναι ένα παράδειγμα για τους δύο παραπάνω div:

Παράδειγμα

div.ex1 {
  width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}
div.ex2 {
  max-width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}

Δοκιμάστε το Μόνοι σας