Innehållsförteckning
Webbläsare gillar Firefox, Chrome, Safari, Opera, etc.. Allihopa följ reglerna för hur du ändrar storlek på element beroende på sidans flöde och layoutDessa regler kan vara mycket detaljerade kanske, men det är det som gör att vi kan ange hur elementen ska behandlas så att storlekarna alltid hålls i proportion till vad vi vill ha från dem.Storleksegenskaper
Det finns några storleksegenskaper som gör att vi kan berätta för webbläsaren hur den ska tolka våra element, låt oss se en lista över dem innan vi går till deras applikation:
Bredd höjd: De konfigurerar bredden och höjden på ett element, de värden det kan ta är följande: auto och.
min-bredd / min-höjd: Det tillåter oss att ställa in minsta bredd eller höjd för ett element, värdena det kan ta är följande: auto och
max-bredd / max-höjd: Ställer in högsta tillåtna höjd eller bredd för ett element, dess möjliga värden är: auto och
lådstorlek: Den fastställer vilken del av elementlådan som tas för storleken, de tillgängliga är: innehåll-låda vaddering-låda kant-låda marginal-låda.
Om du inte ställer in något värde för de visade egenskaperna kommer standardvärdet att vara: auto, även om det inte är angivet, vilket innebär att webbläsaren är den som ställer in storlekarna, också som vi såg kan vi ställa in storlekarna med längdmätningar eller procentsatser, procentsatserna beräknas baserat på behållarelementets bredd.
Efter att ha sett teorin kommer vi nu att gå in i praktiken, låt oss se följande kod där vi kommer att ställa in storleken på två element så att vi kan se hur allt detta fungerar:
Exempel
Som vi kan se är det vi har gjort här väldigt enkelt, vi fastställde en bredd och en höjd för sidens delelement, sedan anger vi två identifierare där vi placerar var och en lådstorlekLåt oss se vad allt detta genererar för oss:
Vad händer om vi nu leker lite med storleken på storleken på webbläsarfönstret, vi vet att div kommer att vara 75% av behållarens storlek, i detta fall är dess behållare kropp som ändras med fönstret och i sin tur bilden med väljaren #först Det är 50% av behållarens bredd, vilket i detta fall är div, när vi ser detta vet vi att något inte kommer att behållas som det är, låt oss se vad som händer i webbläsaren med allt detta.
FÖRSTORA
