CSS 102

Web Programming Course

SUT • Fall 2018

TOC

  • Layout
    • Float and Clearance
      • Clearfix Hack
    • Positioning
      • Containing Block
      • z-index & Stacking Context
    • Flexible Box
    • Alignment
      • Horizontal & Vertical
    • CSS Reset
    • How To

Layout

Overview

More on MDN

The layout is about positioning HTML elements to achieve the desired look. In contrast to the normal flow.

Layout

Float and Clearing

More on MDN

Layout

Float and Clearing

float
Takes an element out of document normal flow, causes in-flow line-boxes wrap the element.

More on MDN

Layout

Float and Clearing

clear​
Specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them.

More on MDN

Layout

Float and Clearing

Float Issue

More on MDN

The parent element ignores the floated child

Layout

Clearfix Hack

To make a parent contain its floated child

More on CSS-Tricks

Float and Clearing

Layout

Positioning

Topics

  • Positioned elements
  • Absolutely positioned elements
  • Containing block
  • Offset properties
  • z-index
  • Stacking context

More on MDN

Layout

More on MDN

Positioning

keeps elements in document normal flow.

The default positioning for elements.

position: static;

Layout

More on MDN

Positioning

Still keeps elements in document normal flow.


Offsets relative to elements' normal position with:

top
bottom
left
right

position: relative;

Layout

More on MDN

Positioning

Removes elements from normal flow.

 

Offsets relative to elements' containing block with:
 

top
bottom
left
right

position: absolute;

Layout

More on MDN

Positioning

Understanding the Containing Block!

The Context

Online DIY

Layout

More on MDN

Positioning

How to make elements appear on top of other elements?

The z-index

Online DIY

Layout

More on MDN

Positioning

z-index & Stacking Context

Online DIY

Layout

More on MDN

Positioning

Removes elements from normal flow.

 

Offsets relative to the initial containing block (viewport) with:
 

top
bottom
left
right

position: fixed;

Layout

More on W3C

Display, Positioning & Float Relationship

Layout

Flexbox

  • Flexible box layout, Why?
  • Flex items
  • Flex direction
  • Ordering

More on MDN

Layout

Flexbox

  • Why?
  • Flex items
  • Flex direction
  • Ordering

More on MDN

Layout

Example

More on MDN

Flexbox

Layout

Learn More

More on MDN

Flexbox

Layout

Alignment

 

  • Inline / Block-level Elements
  • Direction
    • Horizontal
    • Vertical

More on CSS-Tricks

Layout

CSS Reset: strip away default styles

Layout

  • Eric Meyer's CSS Reset

CSS Reset

Layout

  • Normalize! rather than reset

CSS Reset

Layout

Learn more on CSS-Tricks:

  • History
  • Early Solutions
  • Normalize.css
  • Reboot!

CSS Reset

Layout

How To

Layout

How To

Layout

How To

What's Next?

Reference

Made with Slides.com