Odcinek 0404 1

Notes from WTF course

0404-1:

display

<b style="display: block">cała linia - 100% szerokości</b>
<b style="display: inline">zajmuje tyle ile jest treści w środku</b>
<b style="display: inline-block"></b>

Box model


width / height

max-width / max-height

min-width / min-height


overflow

<b style="overflow: hidden">ucina tekst który się nie mieści</b>
<b style="overflow: scroll">dodaje scrolla jeśli tekst/content się nie mieści</b>

jednostki: 0, px, % (brane na podstawie rozmiaru rodzica)

vw - viewport width - szerokość całego okna

vh - viewport height


padding - margines wewnętrzny

border - obramowanie

<p style="border: 3px solid #66A382">szerokość styl kolor</b>
<p style="border: 3px dashed #66A382"></b>
<p style="border: 3px dotted #66A382"></b>
<p style="border-bottom: 3px dotted #66A382">obramowanie tylko dolnej części, możliwe także: top, right, bottom, left</b>
<p style="border-radius: 30px">Zaokrąglenie rogów</b>

margin - jak mocno powinniśmy być oddaleni od pozostałych elementów (margines zewnętrzny)

margin: __px auto; - środkowanie treści

<p style="margin: 32px auto">32px góra/dół, treść wyśrodkowana czyli margin z prawej/lewej strony jako automatyczny</b>