Skip to content

Latest commit

 

History

History
134 lines (100 loc) · 3.48 KB

layouts.md

File metadata and controls

134 lines (100 loc) · 3.48 KB
Raw

⚑ Layouts

These properties is used for arrangement of elements to create different layouts to the HTML document.

There are 3 popular layout properties in CSS. That are display, position and float.

☴ Overview:

  1. Block-level elements
  2. Inline elements
  3. Inline-block elements
  4. Flexbox layout
  5. Grid layout
  6. Positioning
  7. Floating elements

✦ Block-Level Elements:

This type of elements take up the full width of their container and create a new line after them.

Example: <div>, <p>, <h1>-<h6>, <ul>, <ol>, <form>, <table>

✦ Inline Elements:

This type of elements that do not start on a new line and only take up the space they need.

Examples: <span>, <a>, <em>, <strong>, <img>, <input>, <button>

✦ Inline-Block Elements:

The elements that has combination of the characteristics of block-level and inline elements.

Syntax: display: inline-block;

.my-element {
  display: inline-block;
}

✦ Flexbox Layout:

This is a flexible layout system for arranging items in a container.

Syntax: display: flex;

.container {
  display: flex;
  /* required flexbox properties */
}

To know more about flexbox

✦ Grid Layout:

This is a grid-based layout system for creating complex layouts.

Syntax: display: grid;

.container {
  display: grid;
  /* required grid properties */
}

To know more about grid

✦ Positioning:

It determines the element that where should be placed on the parent or the page. There are 5 common positioning type in CSS. That are Static, Relative, Absolute, Fixed, Sticky.

  • Static Position:

    • This is a default positioning in the elements. Which are positioned according to their normal flow.
    • Syntax: position: static;
    div {
  position: static;
}

  • Relative Position:

    • The elements are positioned relative to their normal position
    • Syntax: position: relative;
    div {
  position: relative;
}

  • Absolute Position:

    • The elements are positioned relative to their nearest positioned ancestor or the initial containing block.
    • When assign the position to absolute for any of the child element inside container. Which will be positioned to the document body when parent element does not assigned to relative positioning.
    • Syntax: position: absolute;
    div {
  position: absolute;
}

  • Fixed Position:

    • The elements are positioned relative to the viewport.
    • Syntax: position: fixed;
    div {
  position: fixed;
}

  • Sticky Position:

    • This is a hybrid of relative and fixed positioning. This elements are initially positioned relative to its parent element. As the element scrolls past its parent's top edge, it becomes fixed relative to the viewport until it reaches its bottom edge.
    • Syntax: position: static;
    div {
  position: static;
}

✦ Floating Elements:

The elements are removed from the normal flow and placed to the left or right.

Syntax: float: left; or float: right;

img {
  float: left;
}

⇪ To Top

❮ Previous Topic   Next Topic ❯

⌂ Goto Home Page