Použití CSS k umístění prvků HTML

• Smět 3, 2024

Pravidla CSS vám umožňují umístit prvky HTML přesně tam, kde je chcete. Můžete upravit, jak reagují na ostatní prvky, které sedí kolem nich, nebo je dokonce úplně skrýt. Zde je přehled vlastností umístění CSS.

Displej: Tato vlastnost definuje způsob zobrazení prvku. Nastavení zobrazení na „none“ skryje prvek úplně, zatímco jiné hodnoty mohou změnit, jak prvek reaguje na jiné vlastnosti a prvky. Například divy jsou standardně nastaveny tak, aby se zobrazovaly jako „blok“, což znamená, že funguje jako obdélníkový objekt, ale můžete použít „display: inline“, abyste donutili div jednat jako odstavec. Nebo můžete udělat pravý opak a použít „display: block“ k vynucení odstavce, aby fungoval jako div.

Pozice: Definuje, jak prvek reaguje na prvky v okolí. Prvky ve výchozím nastavení používají „position: static“, což znamená, že se zobrazují v pořadí, v jakém se objevují v kódu HTML. „Pozice: relativní“ znamená, že se vypočítá statické umístění prvku a poté se vyrovná podle toho, co označíte ve vlastnostech „nahoře“ a „vlevo“. Ostatní prvky stránky fungují, jako by byl relativní prvek stále ve svém statickém umístění. Prvky „Pozice: absolutní“ ignorují své statické umístění a svou polohu zakládají výhradně na hodnotách v horních, levých, pravých a spodních vlastnostech. Kromě toho budou ostatní prvky tento prvek ignorovat (takže pokud si nejste opatrní, můžete skončit s některými chaotickými přesahy). „Pozice: pevná“ je podobná jako „Pozice: absolutní“ s tou výjimkou, že prvek udrží své místo, i když váš návštěvník stránku posouvá.

Viditelnost: Rozhoduje, zda se prvek zobrazí na stránce nebo ne. Rozdíl mezi "display: none" a "viditelnost: skrytý" je ten, že v předchozím případě se ostatní prvky stránky chovají, jako by neviditelný objekt neexistoval; v posledně jmenovaném budou další prvky držet místo pro skrytý prvek. Výchozí nastavení je samozřejmě „viditelné“.

Float: Nastavuje, zda se prvek kaskáduje vlevo nebo vpravo od ostatních prvků (nebo vůbec není kaskáda, což je výchozí nastavení). Tato vlastnost je velmi užitečná při správném umístění relativních prvků. Pro každý plovoucí prvek musíte nastavit šířku, jinak se nebude správně zobrazovat. Také, pokud používáte float pro jeden prvek, pravděpodobně budete chtít nastavit vlastnost pro všechny prvky kolem něj.

Vymazat: Tato vlastnost funguje ve spojení s vlastností „float“. Rozhoduje o tom, jak prvek nechá kolem sebe vznášet další prvky - „jasný: vlevo“ znamená, že žádné další prvky nemohou vznášet doleva; „clear: right“ blokuje pravou stranu a „clear: both“ znamená, že se žádné prvky nemohou vznášet na obě strany. Výchozí nastavení je „clear: none“ (což znamená, že ostatní prvky se mohou vznášet na obou stranách).

Video Návody: CSS Efecto - 02 PseudoElementos @JoseCodFacilito (Smět 2024).