Skip to content

Latest commit

 

History

History
81 lines (60 loc) · 3.12 KB

box-model.md

File metadata and controls

81 lines (60 loc) · 3.12 KB

Box model

Vlastnost display

  • Základní block, inline, inline-block, none
  • Každý element má výchozí typ
  • Pomocí CSS lze měnit

Blokové elementy

  • Nadpisy, seznamy, odstavce, divy, strukturální prvky (header, footer, section)

    <div>každý zabere</div>
    <div>celou dostupnou šířku</div>
    <div>řadí se pod sebe</div>

Řádkové elementy

  • Nejsou samostatně na řádku => řadí se za sebou jako slova ve větě
  • Nejde jim nastavit některé vlastnosti z box modelu (šířka, výška, horní/dolní margin)
  • Odkazy, nebo důležitý text (strong)
  • Ony jim ty vlastnosti nastavit jdou, ale neprojeví se očekávaným způsobem
  • Lze ale například úspěšně nastavit pravý/levý margin
  • Zaberou jen tolik místa, kolik potřebují pro svůj obsah a víc nic.

Řádkově-blokové elementy

  • Řádkový hybrid s některými vlastnostmi blokového: řadí se za sebou, ale lze mu nastavit šířku, výšku a okraje.

  • Typicky se tak chovají obrázky

Vlastnosti box modelu

Rozměry

  • width, height

  • min-width, min-height

  • max-width, max-height

    img {
	width: 300px;
	max-width: 100%;
}

  • Vyhýbáme se omezování výšky, stránka je z principu na výšku nekonečná

  • Využíváme procenta v kombinaci s explicitní hodnotou

  • Responzivní/pružný obrázek

Odsazení

  • Vnitřní: padding

  • Vnější: margin

    p {
	margin: 1rem 2rem 0.5rem 1.25rem;
}

  • margin může nabývat i záporných hodnot

  • Lze psát jednotlivě pro strany boxu (top, right, bottom, left)

  • Zkrácené vlastnosti:

    • 1 hodnota: všecky 4 strany shodně (margin: 10px)
    • 2 hodnoty: první nastavuje vertikální odszení, druhá horizontální (margin: 10px 20px)
    • 3 hodnoty: totéž co 2 hodnoty, třetí hodnota je spodní odsazení
    • 4 hodnoty: nastaví všechny strany po směru hodinových ručiček, počínaje top

Ohraničení

  • border-width
  • border-style
  • border-color
  • border: 1px solid aqua
  • border-radius
  • Lze nastavit jednotlivé strany: border-left: 3px solid silver;
  • Lze i nastavit konkrétní vlatnost ohraničení pro každou stranu: border-right-width: 0;
  • I border-radius s jednou hodnotou je zkratka pro všecky rohy, lze je rozepsat
  • border-radius: 50%; vytvoří vizuální kruh, ale prvek zůstává obdélníkem (čtvercem)!
  • Více o border-radius: Jak vytvořit ovál/elipsu, oblé rohy na steriodech