Box model
Box model je základní koncept v CSS, který popisuje, jak jsou prvky na webové stránce vykresleny a jak mezi sebou interagují.
Každý HTML prvek je považován za obdélník, který se skládá z několika vrstev...
Stíny
Stíny v CSS umožňují přidávat vizuální efekty stínu k prvkům na webové stránce.
Existují dvě hlavní vlastnosti pro přidávání stínů..
Position
V CSS vlastnost position určuje, jak je prvek umístěn na webové stránce a jak interaguje s ostatními prvky. Tato vlastnost může nabývat několika hodnot, které určují různé způsoby umístění prvku...
Display : flex
V CSS vlastnost display: flex aktivuje flexbox model, což je způsob uspořádání a zarovnání prvků v kontejneru.
Flexbox je ideální pro vytváření dynamických rozvržení, které se přizpůsobují velikosti obrazovky a různým zařízením.
Float
V CSS vlastnost float umožňuje umístění prvku na jednu stranu kontejneru, což umožňuje textu a dalším prvkům obtékat kolem něj.
Tato vlastnost byla hojně používaná v dřívějších verzích CSS pro tvorbu layoutů, než byla představena moderní metoda flexbox a grid.
- Možné hodnoty float
- left: Prvek bude plavat vlevo a další obsah jej bude obtékat z pravé strany.
- right: Prvek bude plavat vpravo a další obsah jej bude obtékat z levé strany.
- none: Prvek nebude plavat a bude umístěn podle běžného toku dokumentu (výchozí hodnota).
- inherit: Prvek zdědí hodnotu float od svého rodiče.
Zpět
css
Float Right
In this example, the image will float to the right in the paragraph, and the text in the paragraph will wrap around the image.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue.
img {
float: right;
}