Blokové elementy

Patří mezi ně <p>, <h1> a další nadpisy a taky <div>.

• zaberou všechno dostupné místo
• řadí se pod sebe

div {
    background-color: orange;
}

p {
    background-color: cyan;
}

<div>div</div>
<p>p</p>

Řádkové elementy

Většinou vyznačují jen část textu, patří mezi ně odkazy <a>, <strong>, ale i <img> a řádkový ekvivalent bezvýznamového <div>: element <span>.

• chovají se jako obyčejný text: zaberou jen tolik místa, kolik potřebují
• nejsou samostatně na řádku: řadí se za sebou jako slova ve větě

Je zakázáno do řádkových elementů vkládat blokové.

span {
    background-color: orange;
}

strong {
    background-color: cyan;
}

<span>span A</span>
<strong>strong A</strong>

<span>span B</span><strong>strong B</strong>

Všimni si mezery mezi elementy. Je tam, protože je mezi nimi alespoň jeden whitespace znak (v tomto případě znak nového řádku).

Další typy

Je několik výjimek, které se chovají jinak, například položky seznamů nebo prvky tabulek, ale ani jedno není potřeba zatím řešit.

Podívej se na video, které velmi zpomaleně zachycuje vykreslování stránky v prohlížeči. Jak vidíš, je tam spousta „krabic“. Pro ilustraci jsou všechny jen obarvené, s rámečkem a poloprůhledné a jejich obsah je neviditelný. Na pozadí vidíš, jak vypadá výsledná stránka.

box-sizing je vlastnost, která určuje jaký druh box-modelu použít.

Ve většině případů chceš bohužel použít variantu border-box, která není v CSS prohlížeče jako výchozí, proto hned na začátek tvého CSS dej následující kód.

* { box-sizing: border-box; }

Vysvětlení toho, jaký je v tom rozdíl nechme na později. Teď je jen třeba, aby to prohlížeč vykresloval tak, jak čekáš.

Hvězdička * je selektor, který znamená libovolný, tedy každý, element.

Každá krabice na webu má dva rozměry: šířku a výšku. Ty jsou ve výchozím stavu dynamické: přizpůsobují se obsahu nebo rodiči. Je ale možné je nastavit pomocí CSS.

Přetékání

Pokud si nastavíš dostatečně malé rozměry, zjistíš, že text přetekl ven. To je sice překvapivé, ale správné chování. Přece nechceš schovávat před uživatelem obsah.

div {
    background-color: orange;
    width: 500px;
    height: 110px;
}

<div>Zajímá tě programování v Pythonu? Chtěla by ses to naučit? PyLadies pořádají pravidelné odpolední srazy a kurzy.</div>

Pomocí overflow: hidden; ale můžeš obsah přeci jen skrýt. To se hodí v případě, že počítáš se zobrazením obsahu jiným způsobem.

Další možností je overflow: auto;, který zobrazí scrollbary v případě, že je obsah větší, než se vejde do elementu.

Pevné a fluidní rozměry

Aplikovat pevné rozměry můžeš, ale je třeba si dát si pozor jak se vše vejde. Proto je často lepší nastavit fluidní rozměry v %, kde 100% znamená stejný rozměr jako má rodič.

div {
    width: 50%;
    height: 100px;
    background-color: orange;
}

p {
    width: 400px;
    height: 100px;
    background-color: cyan;
}

<div>div má šířku v %</div>
<p>odstavec v pixelech</p>

Tady si musíš změnit šířku okna, abys viděla rozdíl.

Omezení rozměrů

Zvlášť při vytváření stránek, které fungují i na mobilech i na velkých displejích (responzivních) se hodí možnost omezit minimální nebo maximální velikost rozměrů.

To se dělá pomocí přidání vlastností max-width a min-width pro šířku a max-height a min-height pro výšku.

div {
    background-color: cyan;
    width: 50%;
    min-width: 100px;
    max-width: 300px;
}

Tento element by tedy byl široký 50%, ale pokud by 50% vyšlo méně, než 100px, nastaví se mu šířka právě těch 100px. Obdobně by nikdy nebyl širší než 300px.

Rámeček má 3 základní vlastnosti:

1. šířku (nebo tloušťku) čáry
2. typ čáry (plná, tečkovaná, čárkovaná, dvojitá apod.)
3. barvu čáry

div {
    border-width: 2px;
    border-style: solid; /* taky dotted, dashed nebo inset */
    border-color: black;
}

To samé se dá zapsat zkráceným zápisem (tzv. shorthand)

div {
    border: 2px solid black;
}

Funguje to tak, že je určeno v jakém pořadí se hodnoty zapisují, v tomto případě je to border-width border-style border-color.

Různé hodnoty pro různé strany

Pomocí vlastností border-top border-right border-bottom nebo border-left lze nadefinovat různé rámečky pro různé strany elementu.

div {
    background-color: silver;

    border-top: 20px solid red;

    border-bottom-width: 10px;
    border-bottom-style: dotted;
    border-bottom-color: black;
}

div {
    border: 2px solid black;
    padding: 25px;
}

Různé hodnoty pro jednotlivé strany elementu

Jedna hodnota nastaví shodné odsazení na všech 4 stranách prvku, ale opět funguje padding-top padding-right padding-bottom i padding-left.

Další možností je využít shorthand, který umožnuje zapsat všechny hodnoty přímo k padding

div {
    border: 2px solid black;
    padding: 10px 100px;
}

Pokud uvedeš 3 hodnoty

div {
    border: 2px solid black;
    padding: 10px 100px 50px;
}

A pro úplnost i všechny 4

div {
    border: 2px solid black;
    padding: 10px 100px 50px 200px;
}

Poslední zápis je totéž, jako tento:

div {
    border: 2px solid black;
    padding-top: 10px;
    padding-right: 100px;
    padding-bottom: 50px;
    padding-left: 200px;
}

div {
    border: 2px solid black;
    padding: 25px;
    margin: 40px;
}

<div>první</div>
<div>druhý</div>

Slučování odsazení (margin collapsing)

Pokud by sis změřila přechozí ukázku, zjistila bys, že mezi okraji je jen na výšku jen 20px a ne 40px. Margin tak vlastně znamená: chci aby od dané strany byly ostatní elementy alespoň tolik.

Říká se tomu slučování a dochází k němu za některých okolností, kdy se z hodnot margin-bottom horního prvku a margin-top dolního prvku aplikuje jen ta větší nebo pokud jsou stejné, tak jen jedna z nich.

Za chvíli si ukážeme vlastnosti, jejichž změnou se vypne i slučování.

Co se stane, když zkusíš nastavit tyhle vlastnosti řádkovému elementu?

span {
    width: 100%;
    height: 100px;
    background-color: cyan;
    margin-top: 1000px;
    margin-bottom: 1000px;
    padding-bottom: 50px;
}

<span>Řádkovému elementu šířku ani výšku nenastavíš!</span>
<span>O margin-top a margin-bottom nemluvě.</span>
<span>Ostatní ale jde, jen nezmění tok textu</span>

Typ elementu můžeš změnit pomocí vlastnosti: display.

Element se pak bude zobrazovat jako by byl jiného typu.

Pozor, nenamená to možnost vložit <div> do <span>, změna se týká jen zobrazení.

display: block;

Libovolný element se začne chovat jako blokový.

Lze jim nastavit všechny vlastnosti z box-modelu.

span {
    display: block;
    background-color: yellow;
    margin-bottom: 20px;
}

<span>Narodil jsem jako obyčejný řádkový prvek, ale pak ze mě udělali blok.</span>

display: inline;

Libovolný element se začne chovat jako řádkový.

Nejde jim pak nastavit některé vlastnosti: šířku, výšku, margin-top a margin-bottom.

div {
    display: inline;
    background-color: yellow;
    margin: 20px;
}

<div>Narodil jsem jako blokový prvek, ale pak ze mě udělali řádkový.</div>

display: inline-block;

Libovolný element se začne chovat jako řádkový s některými vlastnostmi blokového-

Řadí se za sebou, ale lze mu nastavit šířku, výšku a všechny hodnoty margin.

p {
    display: inline-block;
    width: 30%;
    background-color: yellow;
    margin: 10%;
}

<p>Jsem blokový prvek, ale chovám se jako řádkově blokový.</p><p>To já taky, nic si z toho nedělej.</p><p>Výchova není co bývala.</p>

Všimni si, že margin je už stejný na šířku i na výšku pixelů, v tomto případě nedochází ke slučování.

Také není náhoda, že mezi prvky není ani jedna mezera, protože jinak by se při menších velikostech marginů zobrazila a výsledek by vypadal jinak. Jde to vyřešit i v CSS, ale ne úplně snadno a teď si tím nemusíme zabývat. Jak řešit layouty (rozložení prvků na stránce) probereme na poslední hodině.

display: none;

Nastavením na none element zmizí. Je to jako by vůbec v dokumentu nebyl, nic neovlivňuje. Čtečky pro nevidomé ho ignorují a stejně tak třeba Google.

Viditelnost

Jedná se sice o jinou vlastnost, ale hodí se ji zmínit, protože dělá něco podobného jako display:none. Nastavením visibility: hidden; se také element schová, ale zůstane po něm místo přesně tak velké, jaké by zabíral, kdyby měl visibility: visible;.

span {
    visibility: hidden;
    background-color: yellow;
}

p {
    display: none;
    background-color: red;
}

<div>Jsem div a jsem vidět</div>
<p>Já jsem odstavec o kterém ani netušíte, že tu je.</p>
<div>Já mám v sobě něco <span>neviditelného</span>, to koukáte.</div>

Možná sis všimla, že šířka i výška elementu zahrnuje i padding a border.

To ale platí pouze pro elementy s box-sizing: border-box;.

Pokud by tam byla výchozí hodnota, tedy content-box, tak by width a height byly rozměr pouze obsahu a hodnoty padding a border by prvek zvětšovaly a to je většinou chování, které se v praxi nehodí, proto ten reset na začátku.

div {
    background-color: yellow;
    display: inline-block;
    width: 50%;
    border: 10px solid black;
    padding: 10px;
}

<div>první</div><div>druhý</div>

Ten samý kód s content-box.