Jaký je rozdíl mezi blokovými a vloženými prvky?
HTML je tvořeno různými prvky, které tvoří bloky webových stránek. Každý z těchto prvků spadá do jedné ze dvou kategorií - buď prvků na úrovni bloku nebo elementů v řádku. Pochopení rozdílu mezi těmito dvěma typy prvků je důležitým krokem při vytváření webových stránek.
Blokovat elementy úrovně
Co je tedy element na úrovni bloku? Prvek na úrovni bloku je prvek HTML, který začíná na webové stránce nový řádek a rozšiřuje celou šířku dostupného horizontálního prostoru svého nadřazeného prvku. Vytváří velké bloky obsahu, jako jsou odstavce nebo rozdělení stránek. Ve skutečnosti většina prvků HTML je elementy na úrovni bloku.
Prvky na úrovni bloku se používají v těle dokumentu HTML. Mohou obsahovat vložené prvky, stejně jako další prvky na úrovni bloku.
Inline prvky
Na rozdíl od elementu na úrovni bloku může inline element:
- Začněte ve frontě
- Nezačíná nový řádek
- Jeho šířka se rozšiřuje jen tak, jak je definována jeho značkami.
Příklad vloženého prvku je značka , která vytváří písmo textového obsahu, které je uvedeno tučným písmem. Inline element obvykle obsahuje pouze další vložené prvky, nebo vůbec neobsahuje nic, například značku
break.
V HTML je také třetí typ prvku: ty, které se vůbec nezobrazují. Tyto prvky poskytují informace o stránce, ale při zobrazování ve webovém prohlížeči se nezobrazují.
Například:
-
definuje styly a styly. - definuje metadata.
- je prvek HTML dokumentu, který obsahuje tyto prvky.
Přepínání typů inline a blokových prvků
Můžete změnit typ prvku z inline na blok nebo naopak pomocí jednoho z těchto vlastností CSS:
- zobrazení: blok;
- zobrazení: inline;
- displej: žádný;
Vlastnost zobrazení CSS umožňuje změnit blokovací blok nebo vložený blok, nebo se vůbec nezobrazovat.
Kdy změnit zobrazení vlastnosti
Obecně chci ponechat vlastnost displeje sama, ale existují některé případy, kdy může být užitečné vyměnit inline a blokovat vlastnosti zobrazení.
- Nabídky v horizontálním seznamu: Seznamy jsou elementy na úrovni bloku, ale pokud chcete, aby se vaše menu zobrazovalo vodorovně, musíte převést seznam na vložený prvek tak, aby každá položka nabídky nezačala na novém řádku.
- Hlavičky v textu: Někdy můžete v hlavičce nechat hlavičku, ale zachovat hodnoty hlavičky HTML. Změna hodnot h1 až h6 na hodnotu inline umožní, aby text, který přichází po jeho uzavíracím tagu, nadále proudil vedle něj na stejném řádku namísto začátku nového řádku.
- Odstranění prvku: Pokud chcete úplně odstranit prvek z normálního toku dokumentu, můžete jej nastavit na žádný. Jedna poznámka, buďte opatrní při používání displeje: none.While tento styl skutečně učiní prvek neviditelným, nikdy byste ho neměli používat ke skrytí textu, který jste přidali pro účely SEO, ale nechcete zobrazovat pro návštěvníky. To je jistý způsob, jak vaše stránky penalizovat za přístup k SEO.
Obecné chyby formátování vložených prvků
Jedním z nejčastějších chyb, které nově příchozí uživatel dělá, je snaha nastavit šířku na vložený prvek. To nefunguje, protože šířka vložených prvků není definována kontejnerem.
Inline prvky ignorují několik vlastností:
- šířku a výšku
- max-šířka a max-výška
- min-šířka a min-výška
Poznámka: Aplikace Microsoft Internet Explorer (nyní nazývaná Microsoft Edge) v minulosti nesprávně použila některé z těchto vlastností i do vložených políček. To není kompatibilní s normami, což nemusí být případ novějších verzí webového prohlížeče společnosti Microsoft.
Pokud potřebujete definovat šířku nebo výšku, kterou by měl element přijmout, budete jej chtít použít pro element na úrovni bloku, který obsahuje váš vložený text.
Upravil Jeremy Girard dne 2/3/17