Indholdsfortegnelse
Webbrowsere kan lide Firefox, Chrome, Safari, Opera osv. Allesammen følg regler for, hvordan du ændrer størrelsen på elementer afhængigt af sidens flow og layoutDisse regler kan være meget detaljerede, men det er det, der giver os mulighed for at specificere, hvordan elementerne skal behandles, så størrelserne altid holdes i forhold til, hvad vi ønsker fra dem.Størrelse egenskaber
Der er nogle størrelsesegenskaber, der giver os mulighed for at fortælle browseren, hvordan den skal fortolke vores elementer, lad os se en liste over dem, før vi går til deres applikation:
Bredde højde: De konfigurerer bredden og højden på et element, de værdier det kan tage er følgende: auto og.
min-bredde / min-højde: Det giver os mulighed for at indstille minimumsbredden eller -højden for et element, de værdier, det kan tage, er følgende: auto og
max-bredde / max-højde: Indstiller den maksimalt acceptable højde eller bredde for et element, dets mulige værdier er: auto og
kasse-dimensionering: Det fastslår, hvilken del af elementboksen der tages i forhold til størrelsen, de tilgængelige er: indhold-boks polstring-boks kant-boks margin-boks.
Hvis du ikke angiver nogen værdi til de viste egenskaber, vil standardværdien være: auto, selvom den ikke er angivet, hvilket betyder, at browseren er den, der angiver størrelserne, også som vi så, kan vi indstille størrelserne vha. længdemålinger eller procenter, idet procenterne beregnes ud fra bredden af beholderelementet.
Efter at have set teorien, vil vi nu gå i praksis, lad os se følgende kode, hvor vi vil indstille størrelsen på to elementer, så vi kan se, hvordan alt dette fungerer:
Eksempel
Som vi kan se, er det, vi har gjort her, meget enkelt, vi etablerede en bredde og en højde for div -elementet på siden, så angiver vi to identifikatorer, hvor vi placerer hver forskellige kasse-dimensioneringLad os se, hvad alt dette genererer for os:
Hvad sker der, hvis vi nu leger lidt med størrelsen på browservinduets størrelse, ved vi, at div vil være 75% af størrelsen på sin beholder, i dette tilfælde er dens beholder krop, der ændres med vinduet og igen billedet med vælger #først Det er 50% af bredden af dens beholder, som i dette tilfælde er div, når vi ser dette ved vi, at noget ikke bliver bevaret, som det er, lad os se, hvad der sker i browseren med alt dette.
FORSTØRRE
