Display
    Block
        always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
        Div, h1-h6, p, form, header, footer, section
    Inline
        An inline element does not start on a new line and only takes up as much width as necessary.
        Span, a, img
    Inline-block
        inline-block elements are like inline elements but they can have a width and a height.

Position
    Static
        HTML elements are positioned static by default.
        Static positioned elements are not affected by the top, bottom, left, and right properties.
        An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page
    Relative
        Relative to its position
    Fixed
        Relative to viewport
    Absolute
        Relative to parent element with changed (non-default) position
        If there is no parent element witch changed position, it is relative to topmost elements, body/html

Float
    http://kod.djpw.cz/nwoc
    Originally to have text wrap/float around images/elements
    Used to be used to layouts
    The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container.
    clear: both

calc
    calc(100px + 100px);
    calc(50% - 100px);

Media queries
    2 ways to make mobile web
        Special web only for mobile devices - https://m.alza.cz vs https://www.alza.cz
        One responsive web - obrazky.cz

    Media queries can be used to check many things, such as:
        width and height of the viewport
        width and height of the device
        orientation (is the tablet/phone in landscape or portrait mode?)
        resolution, pixel density retina

    CSS3 Media Types
        all
            used for all media type devices
        print
            used for printers
        screen
            Used for computer screens, tablets, smart-phones etc.

    Example
        @media screen and (min-width: 480px) and (max-width: 600px) {
            body {
                background-color: lightgreen;
            }
        }

        @media print {
            nav {
                display: none;
            }
        }

    Mobile first

    https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Meta viewport tag
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

Pseudo elements
    ::after
    ::before
    ::first-letter
    ::first-line
    ::selection