Οι ιδιότητες CSS height και width χρησιμοποιούνται για τον ορισμό του ύψος και πλάτος ενός στοιχείου.
Η ιδιότητα CSS max-width χρησιμοποιείται για τον ορισμό του μέγιστου πλάτους ενός στοιχείου.
Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 50px;
width: 100%;
border: 1px solid #4CAF50;
}
</style>
</head>
<body>
<h2>CSS height and width properties</h2>
<div>This div element has a height of 50 pixels and a width of 100%.</div>
</body>
</html>
Οι ιδιότητες height και width χρησιμοποιούνται για τον ορισμό του ύψος και πλάτος ενός στοιχείου.
Οι ιδιότητες ύψους και πλάτους δεν περιλαμβάνουν επένδυση, περιγράμματα ή περιθώρια. Ορίζει το ύψος/πλάτος της περιοχής μέσα στο padding, το περίγραμμα και το περιθώριο του το στοιχείο.
Οι ιδιότητες ύψος και πλάτος μπορεί να έχει τις ακόλουθες τιμές:
αυτόματο - Αυτή είναι η προεπιλογή. Το πρόγραμμα περιήγησης υπολογίζει το ύψος και το πλάτος
μήκος - Καθορίζει το ύψος/πλάτος σε px, cm, και τα λοιπά.
% - Καθορίζει το ύψος/πλάτος σε ποσοστό το μπλοκ που περιέχει
αρχικό - Ορίζει το ύψος/πλάτος στο Προεπιλεγμένη τιμή
κληρονομεί - Το ύψος/πλάτος θα είναι κληρονομείται από τη μητρική του αξία
Ορίστε το ύψος και το πλάτος ενός στοιχείου <div>:
div {
height:
200px;
width: 50%;
background-color: powderblue;
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the height and width of an element</h2>
<div>This div element has a height of 200px and a width of 50%.</div>
</body>
</html>
Ορίστε το ύψος και το πλάτος ενός άλλου στοιχείου <div>:
div {
height:
100px;
width: 500px;
background-color: powderblue;
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the height and width of an element</h2>
<div>This div element has a height of 100px and a width of 500px.</div>
</body>
</html>
Σημείωση: Να θυμάστε ότι οι ιδιότητες ύψος και πλάτος δεν περιλαμβάνουν padding, περιγράμματα , ή περιθώρια! Ορίζουν το ύψος/πλάτος της περιοχής μέσα στο γέμισμα, το περίγραμμα, και περιθώριο του στοιχείου!
Η ιδιότητα max-width χρησιμοποιείται για τον ορισμό του μέγιστου πλάτους ενός στοιχείου.
Το max-width μπορεί να καθοριστεί σε τιμές μήκους, όπως px, cm, κ.λπ., ή σε ποσοστό (%) του που περιέχει μπλοκ ή έχει οριστεί σε κανένα (αυτό είναι Προκαθορισμένο. Σημαίνει ότι δεν υπάρχει μέγιστο πλάτος).
Το πρόβλημα με το <div> παραπάνω παρουσιάζεται όταν το παράθυρο του προγράμματος περιήγησης είναι μικρότερο από το πλάτος του το στοιχείο (500 px). Στη συνέχεια, το πρόγραμμα περιήγησης προσθέτει μια οριζόντια γραμμή κύλισης στη σελίδα.
Η χρήση του max-width αντ' αυτού, σε αυτήν την περίπτωση, θα βελτιώσει τον χειρισμό μικρών παραθύρων από το πρόγραμμα περιήγησης.
Συμβουλή: Σύρετε το παράθυρο του προγράμματος περιήγησης σε πλάτος μικρότερο από 500 px, για να δείτε τη διαφορά μεταξύ οι δύο div!
Σημείωση: Εάν για κάποιο λόγο χρησιμοποιείτε και τα δύο Η ιδιότητα width και το Η ιδιότητα max-width στο ίδιο στοιχείο και η τιμή του Η ιδιότητα πλάτος είναι μεγαλύτερη από την Ιδιότητα max-width; ο Θα χρησιμοποιηθεί η ιδιότητα max-width (και η Η ιδιότητα width θα αγνοηθεί).
Αυτό το στοιχείο <div> έχει ύψος 100 pixel και α μέγιστο πλάτος 500 pixel:
div {
max-width: 500px;
height:
100px;
background-color: powderblue;
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the max-width of an element</h2>
<div>This div element has a height of 100px and a max-width of 500px.</div>
<p>Resize the browser window to see the effect.</p>
</body>
</html>
Ρυθμίστε το ύψος και το πλάτος των στοιχείων
<!DOCTYPE html>
<html>
<head>
<style>
img.one {
height: auto;
}
img.two {
height: 200px;
width: 200px;
}
div.three {
height: 300px;
width: 300px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the height and width of elements</h2>
<p>Original image:</p>
<img class="one" src="ocean.jpg" width="300" height="300"><br>
<p>Sized image (200x200 pixels):</p>
<img class="two" src="ocean.jpg" width="300" height="300"><br>
<p>The height and width of this div element is 300px:</p>
<div class="three"></div>
</body>
</html>
Αυτό το παράδειγμα δείχνει πώς να ορίσετε το ύψος και το πλάτος διαφορετικών στοιχείων.
Ορίστε το ύψος και το πλάτος μιας εικόνας χρησιμοποιώντας το ποσοστό
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height: 100%;
}
img.one {
height: auto;
width: auto;
}
img.two {
height: 50%;
width: 50%;
}
</style>
</head>
<body>
<h2>Set the height and width in %</h2>
<p>Resize the browser window to see the effect.</p>
<p>Original image:</p>
<img class="one" src="ocean.jpg" width="300" height="300"><br>
<p>Sized image (in %):</p>
<img class="two" src="ocean.jpg" width="300" height="300">
</body>
</html>
Αυτό το παράδειγμα δείχνει πώς να ορίσετε το ύψος και το πλάτος μιας εικόνας χρησιμοποιώντας μια τιμή ποσοστού.
Ορίστε το ελάχιστο πλάτος και το μέγιστο πλάτος ενός στοιχείου
<!DOCTYPE html>
<html>
<head>
<style>
div {
max-width: 400px;
min-width: 100px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the max-width and min-width of an element</h2>
<p>Resize the browser window to see the effect.</p>
<div>This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</div>
</body>
</html>
Αυτό το παράδειγμα δείχνει πώς να ορίσετε ένα ελάχιστο πλάτος και ένα μέγιστο πλάτος ενός στοιχείου χρησιμοποιώντας μια τιμή pixel.
Ορίστε το ελάχιστο ύψος και το μέγιστο ύψος ενός στοιχείου
<!DOCTYPE html>
<html>
<head>
<style>
div {
max-height: 600px;
min-height: 400px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the max-height and min-height of an element</h2>
<p>Resize the browser window to see the effect.</p>
<div>This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</div>
</body>
</html>
Αυτό το παράδειγμα δείχνει πώς να ορίσετε ένα ελάχιστο ύψος και ένα μέγιστο ύψος ενός στοιχείου χρησιμοποιώντας μια τιμή pixel.
Ορίζει το ύψος ενός στοιχείου
Ορίζει το μέγιστο ύψος ενός στοιχείου
Ορίζει το μέγιστο πλάτος ενός στοιχείου
Ορίζει το ελάχιστο ύψος ενός στοιχείου
Ορίζει το ελάχιστο πλάτος ενός στοιχείου
Ορίζει το πλάτος ενός στοιχείου