Sadržaj
Web preglednici poput Firefox, Chrome, Safari, Opera itd. Svi oni slijedite pravila o tome kako promijeniti veličinu elemenata ovisno o tijeku i izgledu straniceOva pravila možda mogu biti vrlo detaljna, ali to nam omogućuje da odredimo kako se s elementima treba postupati tako da se veličine uvijek drže razmjerno onome što od njih želimo.Svojstva veličine
Postoje neka svojstva veličine koja nam omogućuju da kažemo pregledniku kako bi trebao tumačiti naše elemente, pogledajmo njihov popis prije nego krenemo u njihovu aplikaciju:
Širina Visina: Oni konfiguriraju širinu i visinu elementa, vrijednosti koje može poprimiti su sljedeće: auto i.
min-širina / min-visina: Omogućuje nam postavljanje minimalne širine ili visine za element, vrijednosti koje može poprimiti su sljedeće: auto i
max-width / max-height: Postavlja najveću prihvatljivu visinu ili širinu za element, njegove moguće vrijednosti su: auto i
dimenzioniranje kutije: Određuje koji dio okvira s elementima se uzima za veličinu, a dostupni su sljedeći: sadržaj-okvir padding-box border-box margin-box.
Ako ne postavite nikakvu vrijednost pregledanim svojstvima, zadana vrijednost bit će: auto, čak i ako nije navedena, što znači da će preglednik biti taj koji postavlja veličine, također kao što smo vidjeli možemo postaviti veličine pomoću mjerenje duljine ili postotke, pri čemu se postoci izračunavaju na temelju širine elementa spremnika.
Nakon što smo vidjeli teoriju, sada ćemo prijeći u praksu, pogledajmo sljedeći kod u kojem ćemo postaviti veličinu dvaju elemenata kako bismo mogli vidjeti kako sve to funkcionira:
Primjer
Kao što vidimo, ono što smo ovdje učinili vrlo je jednostavno, utvrdili smo širinu i visinu za div element stranice, zatim navodimo dva identifikatora na koja postavljamo svaki različiti dimenzioniranje kutijePogledajmo što nam sve ovo stvara:
Što će se dogoditi ako se sada malo poigramo s promjenom veličine prozora preglednika, znamo da će div biti 75% veličine njegova spremnika, u ovom slučaju njegov spremnik je tijelo koje se mijenja s prozorom i zauzvrat sliku s biračem #prvi To je 50% širine njegovog spremnika, što je u ovom slučaju div, kad to vidimo znamo da se nešto neće zadržati onakvo kakvo jest, da vidimo što se događa u pregledniku sa svim ovim.
POVEĆAJTE
