Obsah
Webovým prohlížečům se líbí Firefox, Chrome, Safari, Opera atd. Všichni dodržujte pravidla, jak měnit velikost prvků v závislosti na toku a rozložení stránkyTato pravidla mohou být možná velmi podrobná, ale právě to nám umožňuje určit, jak by se s prvky mělo zacházet, aby byly velikosti vždy udržovány v poměru k tomu, co od nich chceme.Vlastnosti velikosti
Existuje několik vlastností velikosti, které nám umožňují sdělit prohlížeči, jak by měl interpretovat naše prvky. Před přechodem do jejich aplikace se podívejme na jejich seznam:
Šířka výška: Konfigurují šířku a výšku prvku, hodnoty, které může nabývat, jsou následující: auto a.
min. šířka / min. výška: Umožňuje nám nastavit minimální šířku nebo výšku pro prvek, hodnoty, které může nabývat, jsou následující: auto a
max-width / max-height: Nastavuje maximální přijatelnou výšku nebo šířku prvku, jeho možné hodnoty jsou: auto a
velikost krabice: Stanoví, která část pole prvků je převzata pro velikost, dostupné jsou: content-box padding-box border-box margin-box.
Pokud nenastavíte žádnou hodnotu pro zobrazené vlastnosti, bude výchozí hodnota: auto, i když není zadána, což znamená, že prohlížeč bude ten, kdo nastavuje velikosti, a jak jsme viděli, můžeme velikosti nastavit pomocí měření délky nebo procenta, procenta se vypočítávají na základě šířky prvku kontejneru.
Když jsme viděli teorii, půjdeme nyní do praxe, podívejme se na následující kód, kde nastavíme velikost dvou prvků, abychom viděli, jak to všechno funguje:
Příklad
Jak vidíme, to, co jsme zde udělali, je velmi jednoduché, stanovili jsme šířku a výšku prvku div stránky a poté zadáme dva identifikátory, kam umístíme každý jiný. velikost krabicePodívejme se, co to všechno pro nás generuje:
Co se stane, když si teď trochu zahrajeme se změnou velikosti okna prohlížeče, víme, že div bude 75% velikosti jeho kontejneru, v tomto případě je jeho kontejner tělem, které se mění s oknem a podle pořadí obrázek pomocí voliče #První Je to 50% šířky jeho kontejneru, což je v tomto případě div, když to vidíme, víme, že něco nebude zachováno tak, jak to je, podívejme se, co se s tím vším děje v prohlížeči.
ZVĚTŠIT
