***-Controlling the position of elements -Creating site layouts.
- Designing for different sized screens.***
Building Blocks +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 +Block-level boxes start on a new line and act as the main building blocks of any layout, while inline boxes flow between surrounding text. You can control how much space each box takes up by setting the width of the boxes.
***If one block-level element sits inside another block-level element then the outer box is known as the containing or parent element.
CSS has the following positioning schemes that allow you to control the layout of a page: normal flow, relative positioning, and absolute positioning. You specify the positioning scheme using the position property in CSS. You can also float elements using the float property
In normal flow, each block-level element sits on top of the next one. Since this is the default way in which browsers treat HTML elements, you do not need a CSS property to indicate that elements should appear in normal flow, but the syntax would be: position: static;
Relative positioning moves an element in relation to where it would have been in normal flow. For example, you can move it 10 pixels lower than it would have been in normal flow or 20% to the right.
When the position property is given a value of absolute, the box is taken out of normal flow and no longer affects the position of other elements on the page.
Fixed positioning is a type of absolute positioning that requires the position property to have a value of fixed.
1. <-div> elements are often used as containing elements to group together sections of a page
2.Browsers display pages in normal flow unless you specify relative, absolute, or fixed positioning.
3.The float property moves content to the left or right of the page and can be used to create multi-column layouts.
4.Pages can be fixed width or liquid (stretchy) layouts.
5.Designers keep pages within 960-1000 pixels wide, and indicate what the site is about within the top 600 pixels.
7.Grids help create professional and flexible designs.
8.CSS Frameworks provide rules for common tasks.