HTML5 - Maatvoering

Webbrowsers zoals Firefox, Chrome, Safari, Opera, enz.. Allemaal volg de regels voor het wijzigen van het formaat van elementen, afhankelijk van de stroom en lay-out van de paginaDeze regels kunnen misschien heel gedetailleerd zijn, maar het is wat ons in staat stelt om te specificeren hoe de elementen moeten worden behandeld, zodat de afmetingen altijd in verhouding blijven tot wat we van ze willen.
Grootte eigenschappen
Er zijn enkele eigenschappen voor grootte waarmee we de browser kunnen vertellen hoe deze onze elementen moet interpreteren, laten we een lijst ervan bekijken voordat we naar hun toepassing gaan:
Breedte hoogte: Ze configureren de breedte en hoogte van een element, de waarden die het kan aannemen zijn de volgende: auto en.
min-breedte / min-hoogte: Hiermee kunnen we de minimale breedte of hoogte voor een element instellen, de waarden die het kan aannemen zijn de volgende: auto en
max-breedte / max-hoogte: Stelt de maximaal aanvaardbare hoogte of breedte in voor een element, de mogelijke waarden zijn: auto en
doosmaat: Het stelt vast welk deel van de elementbox wordt genomen voor de grootte, de beschikbare zijn: content-box padding-box border-box margin-box.
Als u geen waarde instelt voor de bekeken eigenschappen, is de standaardwaarde: auto, zelfs als deze niet is opgegeven, wat betekent dat de browser degene is die de maten instelt, ook zoals we zagen, kunnen we de maten instellen met lengtematen of percentages, waarbij de percentages worden berekend op basis van de breedte van het containerelement.
Nadat we de theorie hebben gezien, gaan we nu naar de praktijk, laten we de volgende code bekijken waarin we de grootte van twee elementen zullen instellen, zodat we kunnen zien hoe dit allemaal werkt:

 Voorbeeld 

Zoals we kunnen zien, is wat we hier hebben gedaan heel eenvoudig, we hebben een breedte en een hoogte vastgesteld voor het div-element van de pagina, en vervolgens specificeren we twee identifiers waar we elke verschillende plaatsen doosmaatLaten we eens kijken wat dit allemaal voor ons oplevert:

Zoals we kunnen zien, verliest een van de afbeeldingen zijn proportie en blijft de volgende op een formaat waardoor het er niet vervormd uitziet.
Wat gebeurt er als we nu een beetje spelen met de grootte van het browservenster, we weten dat de div 75% van de grootte van zijn container zal zijn, in dit geval is de container een body die verandert met het venster en op zijn beurt de afbeelding met selector #eerst Het is 50% van de breedte van de container, wat in dit geval div is, als we dit zien, weten we dat iets niet zal worden bewaard zoals het is, laten we eens kijken wat er met dit alles in de browser gebeurt.

VERGROTEN

De verhoudingen veranderen door het gebruik van percentagewaarden, nu kunnen we zien hoe de browser de elementen behandelt wanneer we enkele van de grootteregels instellen. Hiermee ronden we onze tutorial af, nu moeten we oefenen totdat we de browser krijgen om de grootte en grootte van de elementen in onze documenten te behandelen zoals we willen. HTML5.Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven