5th lecture

Display

block element

block element with changed size

block element

inline-block element inline-block element inline-block element
inline element inline element inline element

Position

text

position: relative

position: absolute

position: fixed

text

Float

Float without clear-fix element

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, in, suscipit laboriosam mollitia adipisci incidunt et saepe quo facere velit nesciunt ex ipsum qui obcaecati earum ut quas esse at!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, nostrum, deleniti voluptate facere architecto eaque ut reiciendis esse porro fuga cum iusto et iure aut corporis necessitatibus odio recusandae assumenda!

Float with clear-fix element

Calc

width: calc(100% - 200px);

Media queries

this box has different styles when viewport width is < 600px

Pseudo elements

item with ::before
item with ::before
item with ::before