Skip to content

Latest commit

 

History

History
127 lines (87 loc) · 3.85 KB

11-css-box-model.md

File metadata and controls

127 lines (87 loc) · 3.85 KB

Box-model

Výška a šířka

.tip {
	width: 300px;
	height: 100px;
	max-width: 100%;
}

  • z jednotlivých prvků skládáme komponenty a z nich pak stránky
  • lze také nastavit šířku/výšku minimální a maximální => min-width, max-height
  • pozor na procenta u výšky: stránka je z principu nekonečná

Nastavíme obrázkům v galerii šířku

  • Pozor třetina (33,33%) nebude fungovat, kvůli mezerám mezi obrázky. Odkud se tam mezery berou? Vzpomeňte si na začátek: v HTML se všechno bílé místo zdrcne na délku jedné mezery. Takže obrázky, které máme v řádcích pod sebou, mezi sebou mají právě jednu mezeru. Je vícero řešení, jak se zbavit mezer, ale my to vyřešíme šířkou 32 %.
  • Tak je to ve fontendu často: i když nám něco přijde divné a nesmyslné, ve skutečnosti to vyplývá přesně z pravidel. Něco jako francouzská výslovnost… Takže jsou i výjimky.

Ohraničení

img {
	border-width: 2px;
	border-style: solid;
	border-color: black;
}
img {
	border: 2px solid black;
}

  • ohraničení: vytyčuje hranici mezi prvkem a okolím (okolními prvky)
  • rámeček kolem prvku: různé hodnoty border-style (dotted, dashed, inset)
  • zkrácený zápis: totéž co nad; tento nastaví stejný rámeček po všech stranách. Lze samozřejmě nastavovat ohrančení pro každou stranu zvlášť.
  • lze stylovat samostatně každou ze 4 stran: top, right, bottom, left (border-left)
  • border-radius zadávají se mu délkové jednotky (rem/px/% aj.)

Orámujeme obrázky

Odsazení obsahu od okraje

.tip {
	padding: 1.5rem;
}

  • „hraniční pásmo“ ‒ prostor mezi ohraničením a obsahem prvku
  • 1 hodnota nastaví shodné odsazení na všech 4 stranách prvku.

Odsazení sekcí

Odsazení od vnějších prvků

.tip {
	margin: 1rem;
}

  • za hranicí prvku, v rodičovském prvku (section, body)
  • všimněte si, že margin se už do šířky prvku nezapočítává, to je důležité si uvědomit, když počítám šířku kterou mi prvky zaberou (pokud mají margin po obou stranách, zabere mi každý prvek 2 × margin + šířka)
  • poznámka pod čarou: margin může nabývat i záporných hodnot (jako jediná vlastnost box modelu)

Box-model ‒ shrnutí

  • všechny prvky na stránce bez ohledu na vizuální tvar jsou krabice/boxy/obdélníky
  • vlastnost width určuje, jak má být prvek široký včetně ohraničení (border) a výplně (padding)
  • margin se do šířky nezapočítává, ale ovlivňuje, kolik místa prvek ve výsledku zabere
  • Pozor při výpočtech: nezpomeňte násobit 2:
    margin: 5px; ubere na šířku (resp. výšku) úhrnem 10 px => vlevo a vpravo (resp. nahoře a dole). Platí i pro padding a border.
  • výše uvedené platí pouze pokud mají všechny prvky nastaven box-sizing: border-box;, viz začátek CSS souboru na Repl.it