reading-notes

View project on GitHub

Read: 08 - More CSS Layout

From the Duckett HTML book:

HTML/CSS book, Ch. 15, Layout (again; repeat of Class 4 reading)

  • <div> elements -> are used to group together sections of a page.
  • block-level box that when block-level element is used; Block-level boxes start on a new line.
  • the containing or parent element An outer block-level box that has a block-level box inside it.

    The position Property most values are:

    1. static(which is a default value for position Property) it is always positioned according to the normal flow of the page.
    2. relative is positioned relative to its normal position. we can specify top bottom left right values when using it.
    3. absolute allows to place any element exactly where you want
    4. fixed like absolutely positioned elements(It is taken out of normal flow); but fixed elements do not affect the position of surrounding elements.
  • Floating Elements aposition the to the far left or right of a containing box(take it out of the flow).
  • z-index allows you control position values (relative, fixed, or absolute) which element sits on top of others.
  • Clear : Clearing the float of the next element.
  • Pages can be fixed width or liquid (stretchy) layouts.
  • Grid Layout offers a grid-based layout system, with rows and columns.
  • multiple CSS files can be included in the same page.