Αλλάξτε το μέγεθος της περιουσίας του CSS3

Μεταξύ των πολλών καινοτομιών που εισήγαγε το CSS3, το νέο - και δεν έχει ακόμη τελικό - απελευθέρωση του Cascading Style Sheets, ένα ακίνητο είναι ιδιαίτερα ενδιαφέρον είναι το μέγεθος. Χάρη σε αυτό το ακίνητο, είναι εύκολο να δούμε, μπορείτε να δημιουργήσετε, τόσο απλή, με δυνατότητα αλλαγής μεγέθους στοιχεία μέσα σελίδες μας χρησιμοποιώντας μία γραμμή του CSS κώδικα (μέχρι την έλευση του CSS3 δημιουργώντας στοιχεία που απαιτούνται για τη χρήση των επεκτάσιμη πολύπλοκες λειτουργίες JavaScript).

Σήμερα αυτό το ακίνητο, καθώς και πολλές άλλες του CSS3, δεν είναι ευρέως υποστηρίζεται από όλους τους browsers, αλλά μόνο εκείνα της οικογένειας WebKit (Safari και Chrome) και Firefox 4.

Να σημειωθεί ότι ορισμένα από αυτά τα στοιχεία της σελίδας προγράμματα περιήγησης, όπως το <textarea> ετικέτα, είναι resizable από προεπιλογή όσον αφορά το ύψος και το πλάτος.

Διαχείριση αλλαγής μεγέθους

Αλλάξτε το μέγεθος του ακινήτου ενδέχεται να έχει διαφορετικές αξίες:

• κανένα στοιχείο δεν είναι = με δυνατότητα αλλαγής μεγέθους?
• Οριζόντια = το στοιχείο που μπορεί να αλλάξει μέγεθος μόνο οριζόντια?
• = Κατακόρυφη συνιστώσα μπορεί να αλλάξουν μέγεθος μόνο κάθετα?
• τόσο = το στοιχείο μπορεί να μεταβληθεί τόσο κάθετα και οριζόντια?

Εδώ είναι μερικά παράδειγμα:

 / *







 Αποτρέπει την αλλαγή μεγέθους του textarea







 * /







 textarea {αλλάξετε το μέγεθος: κανένας?}









 / *







 Μπορώ να δημιουργήσω ένα resizable στοιχείο κάθετα







 * /







 div.vert {αλλάξετε το μέγεθος: κάθετη?}

Διαχειριστείτε το μέγεθος με δεσμεύονται

Η χρήση της αλλάξετε το μέγεθος των ακινήτων, πολύ συχνά συνοδεύεται - για λόγους σχεδιασμού - για τους περιορισμούς που καθορίζουν το ελάχιστο και / ή κατ 'ανώτατο όριο μπορεί να υποθέσει ότι η δυνατότητα αλλαγής μεγέθους στοιχείο. Για το σκοπό αυτό χρησιμοποιήσαμε τις παρακάτω ιδιότητες CSS:

• max-width και ύψος-max
• min-πλάτος και το ύψος min-

Ας δούμε ένα παράδειγμα με δυνατότητα αλλαγής μεγέθους div οριζόντια με σταθερό μέγιστο πλάτος:

 {Div.horiz



  



 Ύψος: 200px?



  



 Πλάτος: 300px?



  



 max-width: 600px?



  



 υπόβαθρο: # EEEEEE?



  



 σύνορα: 3px στερεά # dddddd?



  



 υπερχείλιση: auto?



  



 μέγεθος: οριζόντια?







 }

Σε αυτή τη σελίδα μπορείτε να δείτε ένα demo εργασίας (φυσικά, για να δείτε το ακίνητο αλλάξετε το μέγεθος του έργου θα πρέπει να χρησιμοποιήσετε ένα πρόγραμμα περιήγησης που το υποστηρίζει).