Use div + CSS Layout page

When designing a Web page, it is critical to be able to control the position of each module in the page. This chapter explains how to use DIV+CSS to position page elements.

Div is a container object specified in HTML specifically for layout design

The div is the core object of the CSS layout.

The DIV itself has nothing to do with the style, and the style needs to be written in CSS to implement, so the Div object should be essentially decoupled from the style. (The final style is done by CSS)

No matter how complex the layout method is, you can use the juxtaposition and nesting between the div to implement.

In order to achieve separation between content and performance , the align alignment attribute and the style line style sheet properties should not be written in the DIV tag, so theDiv code may only have the following two forms:

<div id= "id name" > content </div>

<div class= "class name" > Content </div>

CSS layout positioning

CSS layout First of all the page in the overall <Div> marked the block, and then the individual blocks of CSS positioning, and finally add the corresponding content in each block. Page with CSS layout, update

Very easy, even the topology of the page, can be repositioned by modifying CSS properties.

　　1. Floating positioning

Floating positioning is a very important tool in CSS typesetting.

The floating box can move left and right until its edge touches the edge of the containing box or another floating box.

Property: Float Available value: none/left/right

Floating positioning will have some special cases (the inclusion box cannot hold ...). ）

　　2. Position positioning

position specifies the position of the block relative to its parent block and where it should be relative to itself.

Property: Position

Available values:

Relative relative objects are not stackable (offset position in normal document flow)

Absolute absolutely its cascade is defined by the Z-index property (drag the object out of the document stream)

Fixed suspension places elements in a position on the screen (without scrolling with the scroll bars)

1. Relative positioning:

The element still occupies the original space, regardless of whether it is moved or not. Therefore, moving an element causes the other boxes to be overwritten.

2. Absolute positioning:

Absolute positioning makes the position of an element independent of the document flow and therefore does not occupy space.

Simply put, after using absolute positioning, the object floats on top of the page. (The larger the value of the Z-index property, the higher the box's position in the heap)

3. Hover positioning:

Essentially the same as setting it to absolute, except that the block does not move up or down the country with the browser's scroll bar.

The main problem with positioning is to remember the meaning of each location. Relative positioning is relative to the initial position of the element in the document flow, and absolute positioning is relative to the nearest positioned parent element (if there is no

The parent element that is positioned, which is relative to the original containing block)

Because absolutely positioned boxes are independent of the document flow, they can overwrite other elements on the page.

Use div + CSS Layout page