CSS Layout

Table of Contents

• Multi-column layout

  • position

  • display

  • float

• Navigation

  • Image buttons

  • Text navigation

• animation, transition

  • Element transformation

  • Element clipping

CSS Position

static

: Default value (reference position)

• Follows the basic element placement order (top left)

• When placed inside a parent element, it is positioned relative to the parent element

ex)

div {
    height: 100px;
    width: 100px;
    background-color: #9775fa;
    line-alight: center;
    display: inline-block;
}

• div has block property

  • Since width is 100px, the remaining screen space after 100px is filled with margin!!

relative

: Relative position

absolute

: Absolute position

• Reference

  • Based on the nearest ancestor element that is not static

  • Affects the position of not only itself but also other siblings!

    • Use with caution!

fixed

: Absolute position

.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
}

CSS Float

CSS float property

• float is one of the properties that takes an element out of the normal flow

  • Must be reset through the clear property, and unexpected situations may occur

• Using float implies using block, and if the display value is inline, it is calculated as block

Problems caused by float