02_CSS_Layout.md

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