~~NOCACHE~~
~~REVEAL theme=dokuwiki&transition=convex&controls=1&show_progress_bar=1&build_all_lists=1&show_image_borders=0&horizontal_slide_level=2&enlarge_vertical_slide_headers=0&show_slide_details=1&open_in_new_window=1&size=1024x768~~

====== CSS pozicování ======

===== Blokový model v CSS =====
{{:spse:pm3:pasted:20201110-210449.png?400}}

===== Blokový model v CSS horizontální rozměry =====

{{:spse:pm3:pasted:20201110-210517.png?400}}


===== Blokový model v CSS vertikální rozměry =====
{{:spse:pm3:pasted:20201110-210635.png?400}}

===== CSS pozicování  =====
  * Pomocí CSS pozicování lze jakýkoliv objekt (obrázek, tabulka, text, cokoliv) umístit kamkoliv na stránku.
  * S objekty lze posouvat a mohou se překrývat.
  * Existují dva naprosto odlišné druhy pozicování. 
    * Absolutní pozice
    * Relativní pozice
---->
  * Absolutní pozice umístí objekt do stránky na udané souřadnice bez ohledu na okolní text. 
    * počítá se od levého horního rohu
    * <code css> position: absolute; left: 5px; top: 5px </code>

  * Relativní pozice určuje pouze, o kolik se má objekt posunout oproti své normální poloze. 
    * počítá se od předchozího bloku
    * <code css>position: relative; left: 5px; top: 5px</code>
<----
---->
  * top - určuje posunutí objektu směrem dolů
  * left - určuje posunutí objektu směrem doprava
  * Pro posouvání nahoru a doprava se nepoužívá down a right, nýbrž top a left se zápornými hodnotami.
  * Protože při přesouvání objektů může dojít k překrytí objektu, existuje vlastnost určující, který objekt bude navrchu. Ta vlastnost se jmenuje z-index a dosahuje hodnot celých čísel. Přitom vyšší číslo znamená vyšší pozici při překrývání.
  * Plovoucí objekty - float: left | right 
<----

===== Vlastnosti boxů =====

==== margin ====
^ Atribut      ^ Možné hodnoty       ^ Popis          ^
| margin-top:    | délka; %; auto    | velikost horního okraje         |
| margin-right:     | délka; %; auto| velikost pravého okraje  |
| margin-bottom:     | délka; %; auto     | velikost spodního okraje         |
| margin-left: | délka; %; auto | velikost levého okraje  |
| margin: | | komplexní nastavení velikosti okrajů: nahoře vpravo dole vlevo  |

==== padding ====
^ Atribut      ^ Možné hodnoty       ^ Popis          ^
| padding-top:    | délka; %    | velikost vnitřního horního okraje         |
| padding-right:     | délka; %| velikost vnitřního pravého okraje  |
| padding-bottom:     | délka; %to     | velikost vnitřního spodního okraje         |
| padding-left: | délka; % | velikost vnitřního levého okraje  |
| padding: | | komplexní nastavení velikosti vnitřního okrajů: nahoře vpravo dole vlevo  |

==== border ====
^ Atribut      ^ Možné hodnoty       ^ Popis          ^
| border-top:    | border-width border-style border-color   | nastavení vlastností horní části rámečku          |
| border-right:     | border-width border-style border-color | nastavení vlastností pravé části rámečku   |
| border-bottom:     | border-width border-style border-color    | nastavení vlastností spodní části rámečku          |
| border-left: | border-width border-style border-color| nastavení vlastností levé části rámečku   |
| border: | | komplexní nastavení vlastností rámečku   |

==== Ostatní ====
^ Atribut        ^ Možné hodnoty                                                      ^ Popis                                                                                    ^
| border-color:  | barva                                                              | barva rámečku                                                                            |
| border-style:  | none, dotted, dashed, solid, double, groove, ridge, inset, outset  | none, dotted, dashed, solid, double, groove, ridge, inset, outset                        |
| width:         | auto, délka, %                                                     | šířka                                                                                    |
| height:        | auto, délka,                                                       | šířka                                                                                    |
| float:         | left, right, none                                                  | left, right=plovoucí objekt (např. obrázek),none=normální objekt                         |
| clear:         | left, right, none, both                                            | čekání na skončení plovoucích elementů: left=vlevo, right=vpravo, both=na obou stranách  |