Proprietăți CSS Dimension
Proprietățile de dimensiune CSS permit să controlați înălțimea și lățimea unui element.
Acest element are o lățime de 100%.
Setarea înălțime și lățime
La height și width proprietăți sunt utilizate pentru a seta înălțimea și lățimea unui element.
height și width poate fi setat automat (acest lucru este implicit. Înseamnă că browser - ul calculează înălțimea și lățimea) sau pot fi specificate în valori de lungime, cum ar fi px, cm , etc, sau în procente (%) a blocului care conține .
Notă: height și width proprietăților nu includ umplutură, frontiere, sau margini; au stabilit înălțimea / lățimea zonei din interiorul, chenarul și marginea elementului!
Exemplul următor prezintă un <div> Element cu o înălțime de 100 de pixeli și o lățime de 500 de pixeli:
Setare max lățime
max-width proprietatea este utilizată pentru a seta lățimea maximă a unui element.
max-width poate fi specificată în valori de lungime, cum ar fi px, cm , etc, sau în procente (%) din blocul care conține, sau este setat la nici unul (acest lucru este implicit. Înseamnă că nu există nici o lățime maximă).
Problema cu <div> de mai sus apare atunci când fereastra browser - ului este mai mică decât lățimea elementului (500px) . Browserul adaugă apoi o bară de derulare orizontală a paginii.
Utilizarea max-width în loc, în această situație, se va îmbunătăți manevrabilitatea browser - ului de ferestre mici.
Sfat: Trageți fereastra de browser pentru mai mică decât 500px largă, pentru a vedea diferența dintre cele două divs!
Notă: Valoarea max-width are prioritate față de proprietate width .
Exemplul următor prezintă un <div> Element cu o înălțime de 100 de pixeli și un maxim lățime de 500 de pixeli:
Încearcă-l singur - Exemple
Setați înălțimea și lățimea elementelor
Acest exemplu demonstrează modul de a seta înălțimea și lățimea de elemente diferite.
Setați înălțimea și lățimea unei imagini utilizând procente
Acest exemplu demonstrează modul de a seta înălțimea și lățimea unei imagini utilizând o valoare procentuală.
Set min lățime și max-lățime a unui element
Acest exemplu demonstrează modul în care să setați o lățime minimă și o lățime maximă a unui element folosind o valoare a pixelilor.
Set min-max înălțime și pe înălțime a unui element
Acest exemplu demonstrează modul în care să se stabilească o înălțime minimă și o înălțime maximă a unui element folosind o valoare a pixelilor.
Testați-te cu exerciții!
Toate proprietățile CSS Dimension
| Proprietate | Descriere |
|---|---|
| height | Setează înălțimea unui element |
| max-height | Setează înălțimea maximă a unui element |
| max-width | Setează lățimea maximă a unui element |
| min-height | Setează înălțimea minimă a unui element |
| min-width | Setează lățimea minimă a unui element |
| width | Setează lățimea unui element |