CSS 高度和宽度

Η πλάτος αυτού του στοιχείου είναι 100%.

CSS ρύθμιση ύψους και πλάτους

ύψος και πλάτος Χαρακτηριστικό χρησιμοποιείται για τη ρύθμιση του ύψους και του πλάτους του στοιχείου.

Οι χαρακτηριστικά height και width δεν περιλαμβάνουν το εσωτερικό περιθώριο, το πλαίσιο ή το εξωτερικό περιθώριο. Ρυθμίζουν το ύψος και το πλάτος της περιοχής μέσα στο εσωτερικό περιθώριο, το πλαίσιο και το εξωτερικό περιθώριο του στοιχείου!

Τιμές ύψους και πλάτους CSS

ύψος και πλάτος Το χαρακτηριστικό μπορεί να ρυθμιστεί ως εξής:

  • auto - Προεπιλεγμένη. Ο περιηγητής υπολογίζει το ύψος και το πλάτος.
  • length - Ορισμός του ύψους και του πλάτους με μήκη (π.χ. px, cm κ.λπ.).
  • % - Ορισμός του ύψους και του πλάτους ως ποσοστιαίες τιμές του περιεχομένου του κουτιού.
  • initial - Ρύθμιση του ύψους και του πλάτους σε προεπιλεγμένες τιμές.
  • inherit - Απόκτηση ύψους και πλάτους από την αξία του γονικού στοιχείου.

Παράδειγμα CSS ύψους και πλάτους

Το ύψος του στοιχείου είναι 200 εικονοστοιχεία, το πλάτος είναι 50%

Παράδειγμα

Ρυθμίστε το ύψος και το πλάτος του στοιχείου <div>:

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

Δοκιμάστε το προσωπικά

Το ύψος του στοιχείου είναι 100 εικονοστοιχεία, το πλάτος είναι 500 εικονοστοιχεία.

Παράδειγμα

Ρυθμίστε το ύψος και το πλάτος του άλλου στοιχείου <div>:

div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}

Δοκιμάστε το προσωπικά

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

Ρύθμιση max-width

μέγιστο πλάτος Χαρακτηριστικό χρησιμοποιείται για τη ρύθμιση του μέγιστου πλάτους του στοιχείου.

Μπορείτε να καθορίσετε το max-width (μέγιστο πλάτος) με τιμές μήκους (π.χ. px, cm κ.λπ.) ή με ποσοστιαίες τιμές του περιεχομένου του κουτιού (%) ή να το ρυθμίσετε σε none (προεπιλεγμένη τιμή. σημαίνει ότι δεν υπάρχει μέγιστο πλάτος).

Όταν το παράθυρο του περιηγητή είναι μικρότερο από το πλάτος του στοιχείου (500px), θα συμβεί το προηγούμενο <div> παράδειγμα. Στη συνέχεια, ο περιηγητής θα προσθέσει μια οριζόντια σκακιέρα στη σελίδα.

Σε αυτή την περίπτωση, χρησιμοποιήστε μέγιστο πλάτος Μπορεί να βελτιώσει την επεξεργασία του περιηγητή σε μικρά παράθυρα.

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

Το ύψος του στοιχείου είναι 100 εικονοστοιχεία, το μέγιστο πλάτος είναι 500 εικονοστοιχεία.

Το ύψος του στοιχείου είναι 100 εικονοστοιχεία, το μέγιστο πλάτος είναι 500 εικονοστοιχεία.

Σημείωση:μέγιστο πλάτος Οι τιμές των χαρακτηριστικών θα καλύψουν πλάτος（πλάτος）。

Παράδειγμα

Το ύψος του στοιχείου <div> είναι 100 εικονοστοιχεία, το μέγιστο πλάτος είναι 500 εικονοστοιχεία:

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

Δοκιμάστε το προσωπικά

Περισσότερες παραδείξεις

Ρύθμιση του ύψους και του πλάτους του στοιχείου
Αυτή η παράδειγμα δείχνει πώς να ρυθμίσετε το ύψος και το πλάτος διαφορετικών στοιχείων.
Χρήση ποσοστιαίων τιμών για τη ρύθμιση του ύψους και του πλάτους της εικόνας
Αυτή η παράδειγμα δείχνει πώς να χρησιμοποιήσετε τις ποσοστιαίες τιμές για να ρυθμίσετε το ύψος και το πλάτος της εικόνας.
Ρύθμιση του ελάχιστου και του μέγιστου πλάτους του στοιχείου
Αυτή η παράδειγμα δείχνει πώς να χρησιμοποιήσετε τις τιμές εικονοστοιχείων για να ρυθμίσετε το ελάχιστο και το μέγιστο πλάτος του στοιχείου.
Ρύθμιση του ελάχιστου και μέγιστου ύψους του στοιχείου
Αυτό το παράδειγμα δείχνει πώς να χρησιμοποιηθούν οι τιμές πιξέλ για τη ρύθμιση του ελάχιστου και μέγιστου ύψους του στοιχείου.

Ρύθμιση ιδιοτήτων μεγέθους CSS

Ιδιότητες Περιγραφή
ύψος Ρύθμιση του ύψους του στοιχείου.
μέγιστο ύψος Ρύθμιση του μέγιστου ύψους του στοιχείου.
μέγιστο πλάτος Ρύθμιση του μέγιστου πλάτους του στοιχείου.
ελάχιστο ύψος Ρύθμιση του ελάχιστου ύψους του στοιχείου.
ελάχιστο πλάτος Ρύθμιση του ελάχιστου πλάτους του στοιχείου.
πλάτος Ρύθμιση πλάτους του στοιχείου.