reading-notes

CSS Layout

Controlling the he position of elements creating site layouts designing for different sized screens

• CSS treats each HTML element as if it is in its own box. This box will either be a block-level box or an inline box.

• If one block-level element sits inside another block-level element then the outer box is known as the containing or parent element.

positioning schemes: |<>|scheme| description|position| |——|——|——|—-| | 1. | normal flow | Every block-level element appears on a new line. |static| | 2. | relative positioning | This moves an element from the position it would be in normal flow. |relative| | 3. | and absolute positioning | This positions the element in relation to its containing element. |absolute|

overlapping Elements : z-index

Floating Elements float

Clearing Floats clear

Layout Grids

Composition in any visual art (such as design, painting, or photography) is the placement or arrangement of visual elements — how they are organized on a page. Many designers use a grid structure to help them position items on a page, and the same is true for web designers.

CSS frameworks

aim to make your life easier by providing the code for common tasks, such as creating layout grids, styling forms, creating printer-friendly versions of pages and so on. You can include the CSS framework code in your projects rather than writing the CSS from scratch.