VÝUKA.CSS

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...

  1. Content (Obsah): Toto je skutečný obsah prvku, například text nebo obrázky.
    • Definováno šířkou a výškou prvku (width, height)
  2. Padding (Výplň): Prostor mezi obsahem a hranicí prvku. Padding zvětšuje velikost prvku a je transparentní.
    • Definováno vlastnostmi padding-top, padding-right, padding-bottom, padding-left nebo zkráceně padding
  3. Border (Ohraničení): Hranice okolo paddingu. Může mít různé šířky, styly (plná čára, tečkovaná čára, atd.) a barvy.
    • Definováno vlastnostmi border-width, border-style, border-color nebo zkráceně border
  4. Margin (Okraj): Prostor mezi hranicí prvku (border) a okolními prvky. Margin odděluje prvky od sebe a může být transparentní.
    • Definováno vlastnostmi margin-top, margin-right, margin-bottom, margin-left nebo zkráceně margin

Zpět 
css
        .box {
            width: 400px;
            height: 200px;
            padding: 20px;
            border: 5px solid black;
            margin: 30px;
            background-color: #fff;
            box-sizing: border-box;
        }
margin : 30px
padding : 20px
content
━ border

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ů..


Více o Stínech Ukázat kód

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...


Více o Positionu Ukázat kód

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.


Více o Display : flex Ukázat kód

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.


Více o Floatu Ukázat kód