Model CSS boxu

Box model v CSS popisuje pole, která jsou generována z prvků HTML. Šablona pole také obsahuje podrobné možnosti pro nastavení okrajů, ohraničení, odsazení a obsahu pro každý prvek. Následující obrázek ukazuje, jak je model krabice sestaven.
Krabicový model nebo „krabicový model“ je určitě nejdůležitější funkcí jazyka stylů CSS, protože podmiňuje design všech webových stránek. Box model je chování CSS, které způsobuje, že všechny prvky na stránkách jsou reprezentovány obdélníkovými rámečky.
Jednostránková pole se vytvářejí automaticky. Při každém vložení značky HTML se vytvoří nové obdélníkové pole, které uzavře obsah daného prvku. Následující obrázek ukazuje tři obdélníková pole, která vytvářejí tři značky HTML, které stránka obsahuje.

Ve skutečnosti jsou všechny prvky webové stránky (odstavce, odkazy, obrázky, tabulky atd.) Obdélníkové rámečky. Prohlížeče umisťují tato pole tak, jak jsme je uvedli při rozložení stránky.
Existují dva typy krabic: blokovat a řadit. Blokové prvky narušují tok rozvržení. To znamená, že se objevují samostatně a vkládají „konce řádků“. Vložené prvky sledují tok a jsou obsaženy v blokových prvcích.
Například odstavec by byl prvek bloku (nemůžeme mít odstavec vedle druhého, ale dva odstavce v řadě se zobrazí jeden pod druhým. Na druhé straně je odkaz vložený prvek, protože není "vystřihnout" text, kde je.
Části, které tvoří každé pole a jejich pořadí zobrazení z pohledu uživatele, jsou následující:
Obsah (obsah): je to obsah HTML prvku (slova v odstavci, obrázek, text v seznamu prvků atd.)
Polstrování: Volitelný volný prostor mezi obsahem a okrajem.
Okraj: řádek, který zcela uzavírá obsah a jeho odsazení.
Obrázek na pozadí: Obrázek zobrazený za obsahem a výplňovým prostorem.
Barva pozadí: barva zobrazená za obsahem a výplňovým prostorem.
Okraj (okraj): volitelné oddělení mezi rámečkem a ostatními sousedními rámečky.
Polstrování a okraj jsou průhledné, takže prostor obsazený paddingem zobrazuje barvu pozadí nebo obrázek (pokud je definován) a prostor obsazený okrajem ukazuje barvu pozadí nebo obrázek vašeho nadřazeného prvku (pokud je definován). Pokud žádný nadřazený prvek nemá definovanou barvu pozadí nebo obrázek, zobrazí se barva pozadí obrázku nebo obrázku (pokud je definován).
Pokud pole definuje barevný i obrázek na pozadí, má obrázek vyšší prioritu a zobrazí se právě on. Pokud však obrázek na pozadí zcela nezakrývá pole položky nebo pokud má obrázek průhledné oblasti, zobrazí se také barva pozadí. Kombinací průhledných obrázků a barev pozadí lze dosáhnout velmi zajímavých grafických efektů.Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod