είναι 1000 * 0,75 = 750 pixel. Εάν ο χρήστης αλλάξει το μέγεθος του παραθύρου του προγράμματος περιήγησης, τότε το πλάτος του στοιχείου σώματος και, κατά συνέπεια, το πλάτος του ένθετου μπλοκ div θα αλλάξει επίσης.

Οι ποσοστιαίες τιμές για την ιδιότητα ύψους λειτουργούν παρόμοια με την ιδιότητα πλάτους, μόνο που τώρα το ύψος υπολογίζεται από το ύψος του στοιχείου δοχείου.

Για παράδειγμα:

Ταυτόχρονα, οι πραγματικές διαστάσεις του στοιχείου μπορεί να καταλήξουν να είναι διαφορετικές από αυτές που ορίζονται στις ιδιότητες πλάτους και ύψους. Για παράδειγμα:

Όπως μπορείτε να δείτε στο στιγμιότυπο οθόνης, στην πραγματικότητα, η τιμή της ιδιότητας width - 200 px - καθορίζει μόνο το πλάτος του εσωτερικού περιεχομένου του στοιχείου και κάτω από το μπλοκ του ίδιου του στοιχείου, θα εκχωρηθεί χώρος, το πλάτος του οποίου ισούται με το πλάτος του εσωτερικού περιεχομένου (ιδιότητα πλάτους) + συμπλήρωση (ιδιότητα συμπλήρωσης) + πλάτος περιγράμματος (ιδιότητα πλάτους περιγράμματος) + περιθώρια (ιδιότητα περιθωρίου). Δηλαδή, το στοιχείο θα έχει πλάτος 230 pixel και το πλάτος του μπλοκ στοιχείων, λαμβάνοντας υπόψη τα περιθώρια, θα είναι 250 pixel.

Τέτοιοι υπολογισμοί θα πρέπει να λαμβάνονται υπόψη κατά τον προσδιορισμό των διαστάσεων των στοιχείων.

Με τη χρήση επιπλέον σετιδιότητες, μπορείτε να ορίσετε τα ελάχιστα και μέγιστα μεγέθη:

min-width : ελάχιστο πλάτος

max-width : μέγιστο πλάτος

min-height : ελάχιστο ύψος

max-height : μέγιστο ύψος

ελάχ. πλάτος: 200 px πλάτος:50%; μέγιστο πλάτος: 300 px

Σε αυτήν την περίπτωση, το πλάτος του στοιχείου είναι ίσο με το 50% του πλάτους του στοιχείου κοντέινερ, ωστόσο, δεν μπορεί να είναι μικρότερο από 200 εικονοστοιχεία και περισσότερα από 300 εικονοστοιχεία.

Επαναπροσδιορισμός του πλάτους του μπλοκ

Η ιδιότητα box-sizing σας επιτρέπει να παρακάμψετε τα καθορισμένα μεγέθη των στοιχείων. Μπορεί να λάβει μία από τις ακόλουθες τιμές:

content-box : Η προεπιλεγμένη τιμή της ιδιότητας, στην οποία το πρόγραμμα περιήγησης προσθέτει το πλάτος περιγράμματος και το padding στις τιμές των ιδιοτήτων πλάτους και ύψους για να καθορίσει το πραγματικό πλάτος και ύψος των στοιχείων

padding-box: λέει στο πρόγραμμα περιήγησης ιστού ότι το πλάτος και το ύψος του στοιχείου θα πρέπει να περιλαμβάνουν padding ως μέρος της τιμής του. Για παράδειγμα, ας πούμε ότι έχουμε το ακόλουθο στυλ:

Πλάτος: 200 px ύψος: 100 px; περιθώριο: 10 εικονοστοιχεία padding: 10px περίγραμμα: 5px συμπαγές #ccc; φόντο-χρώμα: #eee; box-sizing: padding-box;

Εδώ το πραγματικό πλάτος του εσωτερικού περιεχομένου του μπλοκ θα είναι 200 ​​εικονοστοιχεία (πλάτος) - 10 εικονοστοιχεία (γέμιση-αριστερά) - 10 εικονοστοιχεία (επένδυση-δεξιά) = 180 εικονοστοιχεία.

Αξίζει να σημειωθεί ότι τα περισσότερα σύγχρονα προγράμματα περιήγησηςδεν υποστηρίζουν αυτήν την ιδιοκτησία.

border-box: λέει στο πρόγραμμα περιήγησης ιστού ότι το πλάτος και το ύψος του στοιχείου θα πρέπει να περιλαμβάνουν συμπλήρωση και περιγράμματα ως μέρος της τιμής του. Για παράδειγμα, ας πούμε ότι έχουμε το ακόλουθο στυλ:

Πλάτος: 200 px ύψος: 100 px; περιθώριο: 10 εικονοστοιχεία padding: 10px περίγραμμα: 5px συμπαγές #ccc; φόντο-χρώμα: #eee; box-sizing: border-box;

Εδώ το πραγματικό πλάτος του εσωτερικού περιεχομένου του μπλοκ θα είναι 200 ​​px (πλάτος) - 10 εικονοστοιχεία (επένδυση-αριστερά) - 10 εικονοστοιχεία (επένδυση-δεξιά) - 5 εικονοστοιχεία (περιθώριο-αριστερό-πλάτος) - 5 εικονοστοιχεία (πλάτος περιγράμματος-δεξιά) = 170 εικονοστοιχεία.

Για παράδειγμα, ας ορίσουμε δύο πλαίσια που διαφέρουν μόνο ως προς την τιμή της ιδιότητας box-sizing:

Στην πρώτη περίπτωση, κατά τον προσδιορισμό του μεγέθους του μπλοκ, οι ιδιότητες πλάτους και ύψους θα προστεθούν στο πάχος του περιγράμματος, καθώς και το padding και το padding, οπότε το πρώτο μπλοκ θα είναι μεγάλο.

Περιγραφή

Ορίζει το ύψος του μπλοκ ή των αντικαταστάσιμων στοιχείων (για παράδειγμα, την ετικέτα ). Το ύψος δεν περιλαμβάνει το πάχος των περιγραμμάτων γύρω από το στοιχείο, την τιμή της επένδυσης και τα περιθώρια.

Εάν το περιεχόμενο του μπλοκ υπερβαίνει το καθορισμένο ύψος, τότε το ύψος του στοιχείου θα παραμείνει αμετάβλητο και το περιεχόμενο θα εμφανίζεται πάνω του. Αυτή η δυνατότητα μπορεί να προκαλέσει την επικάλυψη του περιεχομένου των στοιχείων όταν τα στοιχεία είναι διαδοχικά στον κώδικα HTML. Για να μην συμβεί αυτό, προσθέστε υπερχείλιση : auto στο στυλ του στοιχείου.

Σύνταξη

ύψος: τιμή | ενδιαφέρον | αυτοκινητο | κληρονομώ

Αξίες

Οι τιμές δέχονται οποιεσδήποτε μονάδες μήκους CSS, όπως εικονοστοιχεία (px), ίντσες (in), σημεία (pt) κ.λπ. Όταν χρησιμοποιείται συμβολισμός ποσοστού, το ύψος ενός στοιχείου υπολογίζεται με βάση το ύψος του γονικού στοιχείου. Εάν ο γονέας δεν καθορίζεται ρητά, τότε το παράθυρο του προγράμματος περιήγησης λειτουργεί ως γονέας. Αυτόματο ορίζει το ύψος με βάση το περιεχόμενο του στοιχείου

HTML5 CSS2.1 IE Cr Op Sa Fx

Αποτέλεσμα αυτό το παράδειγμαφαίνεται στο σχ. ένας.

Ρύζι. 1. Εφαρμογή της ιδιότητας ύψους

Μοντέλο αντικειμένου

document.getElementById("elementID").style.height

Προγράμματα περιήγησης

Πρόγραμμα περιήγησης Internet ExplorerΤο 6 ορίζει εσφαλμένα το ύψος ως ελάχ. ύψος .

Στη λειτουργία ιδιόρρυθμης λειτουργίας, ο Internet Explorer μέχρι και την έκδοση 8.0 υπολογίζει εσφαλμένα το ύψος ενός στοιχείου χωρίς να προσθέτει padding, περιθώρια και περιθώρια σε αυτό.

Ο Internet Explorer έως την έκδοση 7.0 δεν υποστηρίζει την τιμή κληρονομιάς.

Από προεπιλογή, τα στοιχεία μπλοκ χρησιμοποιούν αυτόματο πλάτος. Αυτό σημαίνει ότι το στοιχείο θα τεντωθεί οριζόντια ακριβώς όσο είναι. ελεύθερος χώρος. Το ύψος των στοιχείων μπλοκ ορίζεται αυτόματα από προεπιλογή, δηλ. το πρόγραμμα περιήγησης τεντώνει την περιοχή περιεχομένου στην κατακόρυφη κατεύθυνση, έτσι ώστε να εμφανίζεται όλο το περιεχόμενο. Για να ορίσετε προσαρμοσμένα μεγέθη για την περιοχή περιεχομένου ενός στοιχείου, μπορείτε να χρησιμοποιήσετε τις ιδιότητες πλάτους και ύψους.

Η ιδιότητα πλάτος CSS σάς επιτρέπει να ορίσετε το πλάτος της περιοχής περιεχομένου ενός στοιχείου και η ιδιότητα ύψος σάς επιτρέπει να ορίσετε το ύψος της περιοχής περιεχομένου:

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

Για αυτήν την παράγραφο, ορίστε μόνο το πλάτος και το ύψος.

Αυτή η παράγραφος περιέχει, εκτός από το πλάτος και το ύψος, μια εσοχή, ένα περίγραμμα και μια εσοχή.

Προσπαθήστε "

Το παράδειγμα δείχνει ξεκάθαρα ότι το δεύτερο στοιχείο καταλαμβάνει περισσότερο χώρο από το πρώτο. Αν υπολογίσουμε σύμφωνα με τον τύπο μας, τότε οι διαστάσεις της πρώτης παραγράφου είναι 150x100 pixel και οι διαστάσεις της δεύτερης παραγράφου είναι:

Συνολικό ύψος:	5 εικονοστοιχεία	+	10 εικονοστοιχεία	+	100 εικονοστοιχεία	+	10 εικονοστοιχεία	+	5 εικονοστοιχεία	= 130 εικονοστοιχεία
	ανώτερος πλαίσιο		ανώτερος οδοντώ		ύψος		πιο χαμηλα οδοντώ		πιο χαμηλα πλαίσιο

δηλαδή 180x130 pixel.

υπερχείλιση στοιχείου

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

• Ορατό είναι η προεπιλεγμένη τιμή που χρησιμοποιείται από το πρόγραμμα περιήγησης. Ο καθορισμός αυτής της τιμής θα έχει το ίδιο αποτέλεσμα με τη μη ρύθμιση της ιδιότητας υπερχείλισης.
• κύλιση - Προσθέτει κάθετες και οριζόντιες γραμμές κύλισης σε ένα στοιχείο.
• auto - Προσθέτει γραμμές κύλισης εάν χρειάζεται.
• κρυφό - κρύβει μέρος του περιεχομένου που υπερβαίνει τα όρια του στοιχείου μπλοκ.

Σε αυτό το άρθρο, θα δούμε πώς στο CSS μπορείτε να ορίσετε το ύψος ενός μπλοκ ως ποσοστό του πλάτους του. Θα εξετάσουμε την εφαρμογή αυτής της τεχνολογίας χρησιμοποιώντας το παράδειγμα δημιουργίας καρουζέλ Bootstrap (slider) από εικόνες διαφορετικών μεγεθών.

Δημιουργία μπλοκ με ύψος που έχει ένα ορισμένο ποσοστό του πλάτους του

1. Δημιουργήστε μια δομή HTML από 2 μπλοκ:
   Το πρώτο μπλοκ έχει 2 τάξεις. Χρησιμοποιώντας την κλάση που ανταποκρίνεται στα στοιχεία, ας ορίσουμε το μπλοκ σε σχετική τοποθέτηση. Αυτό πρέπει να γίνει για το μπλοκ 2 (το οποίο θα έχει απόλυτη τοποθέτηση) βρίσκεται σε σχέση με αυτό. Επιπλέον, αυτή η κλάση χρησιμοποιείται επίσης για την προσάρτηση του ψευδο-στοιχείου:πριν από το περιεχόμενο των αντίστοιχων στοιχείων (item-responsive). Αυτό το στοιχείο θα ορίσει το επιθυμητό ύψος μπλοκ σε σχέση με το πλάτος του χρησιμοποιώντας την ιδιότητα padding-top CSS. Τέχνασμα αυτή τη μέθοδοείναι ότι εάν η ιδιότητα συμπλήρωσης οριστεί στην τιμή όχι σε pixel, αλλά ως ποσοστό, τότε θα υπολογιστεί από το πρόγραμμα περιήγησης σε σχέση με το πλάτος του. Έτσι, μπορείτε να πάρετε ένα μπλοκ με το απαιτούμενο ύψος. Το επόμενο βήμα είναι να δώσετε στο μπλοκ 2 μια απόλυτη θέση και να το ευθυγραμμίσετε με το πρώτο μπλοκ.
2. Προσθέστε τον ακόλουθο κώδικα CSS στη σελίδα: .item-responsive ( position: σχετική; /* σχετική τοποθέτηση */ ) .item-responsive:before ( display: block; /* εμφάνιση του στοιχείου ως μπλοκ */ περιεχόμενο: "" ; /* περιεχόμενο ψευδοστοιχείου */ πλάτος: 100%; /* πλάτος στοιχείου */ ) .item-16by9 ( padding-top: 56,25%; /* (9:16)*100% */ ) .item-responsive >.περιεχόμενο ( θέση: απόλυτη; /* απόλυτη θέση του στοιχείου */ /* θέση του στοιχείου */ επάνω: 0; αριστερά: 0; δεξιά: 0; κάτω: 0; ) /* Προαιρετικά (για μπλοκ που έχουν αυτές οι κλάσεις) */ .item -4by3 ( padding-top: 75%; /* (3:4)*100% */ ) .item-2by1 ( padding-top: 50%; /* (1:2)* 100% */ ) .item -1by1 ( padding-top: 100%; /* (1:1)*100% */ )

Εφαρμογή της παραπάνω τεχνολογίας κατά τη δημιουργία καρουζέλ Bootstrap

Εάν δεν είστε εξοικειωμένοι με το Bootstrap και θέλετε να μάθετε τι είναι, μπορείτε να χρησιμοποιήσετε το άρθρο Εισαγωγή στο Bootstrap.

Ας εξετάσουμε ένα παράδειγμα στο οποίο θα χρησιμοποιήσουμε την παραπάνω δομή HTML και τον κώδικα CSS για να εμφανίσουμε διαφάνειες καρουζέλ Bootstrap.

Θα χρησιμοποιήσουμε τα ακόλουθα αρχεία ως εικόνες:

• carousel_1.jpg (πλάτος = 736 εικονοστοιχεία, ύψος = 552 εικονοστοιχεία, αναλογία διαστάσεων (ύψος προς πλάτος) = 1,33);
• carousel_2.jpg (πλάτος = 1155 εικονοστοιχεία, ύψος = 1280 εικονοστοιχεία, αναλογία διαστάσεων (ύψος προς πλάτος) = 0,9);
• carousel_3.jpg (πλάτος = 1846 εικονοστοιχεία, ύψος = 1028 εικονοστοιχεία, αναλογία διαστάσεων (ύψος προς πλάτος) = 1,8);
• carousel_4.jpg (πλάτος = 1140 εικονοστοιχεία, ύψος = 550 εικονοστοιχεία, αναλογία διαστάσεων (ύψος προς πλάτος) = 2,07);
• carousel_5.jpg (πλάτος = 800 εικονοστοιχεία, ύψος = 600 εικονοστοιχεία, αναλογία διαστάσεων (ύψος προς πλάτος) = 1,33);

Οι εικόνες θα οριστούν ως φόντο. Αυτό θα επιτρέψει στο καρουζέλ Bootstrap 3 να χρησιμοποιεί εικόνες με διαφορετικούς λόγους διαστάσεων.

Σήμανση HTML καρουζέλ:

Κωδικός CSS Carousel:

Αντικείμενο-απόκριση ( θέση: σχετική; /* σχετική τοποθέτηση */ ) .item-responsive:before ( εμφάνιση: μπλοκ; /* στοιχείο εμφάνισης ως μπλοκ */ περιεχόμενο: ""; /* περιεχόμενο ψευδοστοιχείου */ πλάτος: 100 %; /* πλάτος στοιχείου */ ) .item-16by9 ( padding-top: 56,25%; /* (9:16)*100% */ ) .item-responsive>.content ( position: absolute; /* absolute element θέση * / /* θέση στοιχείου */ επάνω: 0, αριστερά: 0, δεξιά: 0, κάτω: 0, μέγεθος φόντου: εξώφυλλο !σημαντικό; )

Τα περισσότερα στοιχεία στην HTML έχουν συνήθως συγκεκριμένο ύψος και πλάτος. Η ρύθμιση αυτών των παραμέτρων στο CSS είναι αρκετά εύκολη και ως εκ τούτου πρακτική. Οι ιδιότητες ύψους και πλάτους που είναι ήδη γνωστές σε εσάς χρησιμοποιούνται για αυτό. Ωστόσο, σε αυτό το μάθημα θα μιλήσουμε για μη σταθερό πλάτος και ύψος ή λάστιχο, δηλαδή ανάλογα με το πλάτος του ίδιου του παραθύρου. Ας αρχίσουμε)

πλάτος

Αυτή η ιδιότητα ορίζει ένα συγκεκριμένο Πλάτος HTMLστοιχείο. Η τιμή μπορεί να καθοριστεί σε pixel, ποσοστά (άλλες τιμές χρησιμοποιούνται λιγότερο συχνά).

Το μπλοκ μου (
πλάτος: 400 px /* πλάτος 400 px */

}
Ή ως ποσοστό:

MyBlockPercent50 (
πλάτος: 50% /* πλάτος 50% του πλάτους του πλαισίου ή του παραθύρου (αν δεν είναι μέσα σε πλαίσιο σταθερού πλάτους) */
χρώμα: #f1f1f1; /* ανοιχτό γκρι μπλοκ */
}
Αντίστοιχα, παίρνουμε ένα μπλοκ που θα είναι πάντα το μισό του πλάτους του γονέα.

Τώρα για το πιο ενδιαφέρον. πλάτος έχει παραμέτρους που καθορίζουν το μέγιστο ή το ελάχιστο πλάτος. Αυτές είναι οι ιδιότητες min-width και max-width, αντίστοιχα. Μπορείτε επίσης να καθορίσετε τιμές για αυτά σε pixel, ποσοστά και άλλες τιμές. Αυτές οι ιδιότητες αποτελούν τη βάση για τη δημιουργία ελαστικών και προσαρμοστικών σχεδίων ().

Παράδειγμα προσαρμοστικός σχεδιασμός . Κοιτάξτε, αλλάξτε το μέγεθος του παραθύρου του προγράμματος περιήγησης:

Φυσικά, πηδάω μπροστά από τον εαυτό μου. Αλλά πρέπει να καταλάβετε τι και γιατί χρειάζεστε. Ναι, και αγγίξτε ένα ευχάριστο αποτέλεσμα)

Όπως ήδη καταλάβατε, με τη βοήθεια αυτών των ιδιοτήτων, μπορείτε να χειριστείτε πιο ευέλικτα στοιχεία στη σελίδα χωρίς να παραμορφώσετε το περιεχόμενο. Πως δουλεύει? Ας εξετάσουμε τον κώδικα.

ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ (
μέγιστο πλάτος: 800 px
χρώμα φόντου: #f1f1f1; /* ανοιχτό γκρι μπλοκ */
padding: 20px
}
Ένα μπλοκ με αυτές τις ιδιότητες με γονικό πλάτος 200 εικονοστοιχείων θα λάβει την αντίστοιχη τιμή, αλλά εάν το γονικό μπλοκ είναι μεγαλύτερο, για παράδειγμα, 1000 εικονοστοιχεία, τότε θα λάβει ήδη το μέγιστο πλάτος του, δηλαδή 800 εικονοστοιχεία. Δηλαδή, θα αυξηθεί έως ότου το πλάτος του γονικού μπλοκ είναι 801 pixel ή περισσότερο. Επιπλέον, το μπλοκ μπλοκ θα έχει πάντα το μέγιστο επιτρεπόμενο πλάτος του 800 px.

ύψος

Αυτή η ιδιότητα είναι υπεύθυνη για το ύψος του στοιχείου. Ως τιμή, χρησιμοποιούνται όλα τα ίδια κατάλληλα για CSS. Τις περισσότερες φορές τα ίδια ποσοστά και pixel.

πληροφορίες(
ύψος: 200 px; /* το ύψος του μπλοκ θα είναι 200 ​​px */
padding: 10px /* επανάληψη σχετικά με την πλήρωση μέσα στο μπλοκ =) */
}
Λογικό, για το ύψος, μπορείτε να καθορίσετε τις τιμές ελάχιστου και μέγιστου ύψους για το στοιχείο με τις ιδιότητες min-height και max-height, αντίστοιχα.

πληροφορίες(
μέγιστο ύψος: 360 px /* μέγιστο ύψος μπλοκ */
ελάχ. ύψος: 120 px; /* ελάχιστο ύψος μπλοκ */
}
Όπως μπορείτε να δείτε, οι ιδιότητες μπορούν, και συχνά πρέπει, να χρησιμοποιούνται σε ζεύγη.
Ή συνδυάστε τιμές:

Περιεχόμενο(
ύψος: 100%; /* το ύψος θα είναι πάντα 100% */
πλάτος: 760 px /* αλλά το πλάτος είναι σταθερό στα 760 pixel */
}
Εάν έχετε οποιεσδήποτε ερωτήσεις, γράψτε στα σχόλια!

Σας ευχαριστώ για την προσοχή σας! Καλή τύχη στη διάταξη!)