CSS Layout model

I. CSS layout model
Clear the basic concept of CSS box model, box model type, we can delve into the basic model of Web page layout. The layout model is the same as the box model, which is the most basic and core concept of CSS. But the layout model is based on the box model and differs from the CSS layout style or CSS layout template that we often say. If the layout model is this, then the CSS layout template is the last, the external representation.
The CSS contains 3 basic layout models, summarized in English as Flow, Layer, and Float.
In a Web page, elements have three layout models:
A, Flow model (flows)
b, floating model (float)
C, layer model (layers)

two. Three models introduced

1. Flow model

First say flow model, flow is the default page layout mode. This means that the HTML page elements in the default state of the Web page are distributed according to the flow model.

Flow layout model with There are 2 more typical features :

1th,

2nd, under the flow model, . (inline elements are not like blocky elements so overbearing exclusive line)

2. Floating model-

Block elements So overbearing is the exclusive line, if now we want to let two blocks of the top-side display, how to do? Do not worry, set the element floating can realize this desire.

Any element cannot float by default, but it can be defined as floating by CSS, such as Div, p, table, IMG, and so on, which can be defined as floating. The following code enables two DIV elements to be displayed on one line.

div{    width:200px;    height:200px;    BORDER:2PX red solid;     float : Left;} <div id="div1"></div><div id="div2" ></div>

Of course you can also set two elements to the right float can also be implemented on a line display.

div{    width:200px;    height:200px;    BORDER:2PX red solid;     float : Right;}

And a small partner asked, set two elements one to the left can you implement a row display? Of course:

 div{width:200px;    height:200px; BORDER:2PX red Solid;} #div1 { float  :left;} #div2 { float : right;} 

3. What is a layer model?

What is a layer layout model? The layer layout model is like the most popular layer editing feature in Photoshop, where each layer can be precisely positioned, but in the web design area, the layer layout is not hot because of the size of the Web page. However, it is convenient to use the layer layout locally on the Web page. Let's take a look at the layer layout in HTML.

How to allow HTML elements to be positioned precisely in a Web page, just like a layer in the image software Photoshop, allows for precise positioning of each layer. CSS defines a set of positioning (positioning) properties to support the layer layout model.



a, absolute Positioning (position:absolute)

b, relative positioning (position: Relative)

c, fixed positioning (position:fixed)

Span style= "color: #800000; font-size:14pt; " >3.1. Layer model-Absolute positioning

If you want to set an absolute position in the layer model for an element, you need to set Position:absolute (for absolute positioning), which drags the element out of the document stream and then uses the left, right , top, and bottom properties are absolutely positioned relative to their closest parent containing block with a positional property. If no such inclusion block exists, then relative to the body element, that is, relative to the browser window.

The following code can implement a DIV element to move to the right of 100px relative to the browser window and move the 50px down.

div{    width:200px;    height:200px;    BORDER:2PX Red Solid;    Position:absolute;    left:100px;    top:50px;} <div id="div1"></div>

3.2. Layer model-relative positioning

If you want to set relative positioning in the layer model for an element, you need to set position:relative (for relative positioning), which determines the offset of the element in the normal document stream through the left, right, top, and bottom properties. Relative positioning is done by first generating an element as static (and the element floats like a layer), and then moving relative to the previous position, the direction and amplitude of the move is determined by the left, right, top, bottom properties, and the position before the offset remains fixed.

The following code is implemented to move down 50px relative to the previous position, moving 100px to the right;

#div1 {    width:200px;    height:200px;    BORDER:2PX Red Solid;    position:relative;    left:100px;    top:50px;} <div id="div1"></div>

3.3. Layer model--fixed positioning

Fixed: Represents a pinned position, similar to the absolute anchor type, but its relative movement coordinates are the view (the page window within the screen) itself . Because the view itself is fixed, it does not change with the scroll bars of the browser window, unless you move the screen position of the browser window on the screen, or change the display size of the browser window, so the anchored element is always located somewhere in the view in the browser window and is not affected by the flow of the document. This is the same as the Background-attachment:fixed property function. The following code enables you to move the 100px to the right relative to the browser view and move the 50px down. And the position is fixed when you drag the scroll bar.

#div1 {    width:200px;    height:200px;    BORDER:2PX Red Solid;    Position:fixed;    left:100px;    top:50px;} <p> text-Text text-text-text-text-text-text text-text-text-text text-text-text-text-text-text-text-text-text-text-text-text text-text text-Text textual text text </p> ....

    <div id= "Box2" > Relative reference element positioning </div><!--relative positioning element-->
</div>

from the above code it can be seen that Box1 is the parent of Box2 (the parent element is of course the predecessor Element).

B, the element to which the reference is positioned must join position:relative;

#box1 {
    width:200px;
    height:200px;
    position:relative;        
}

C, Positioning elements are added to the position:absolute, they can be offset by using top, bottom, left and right.

#box2 {
    position:absolute;
    top:20px;
    left:30px;         
}

In this way box2 can be positioned relative to the parent element Box1 (here the reference is not a browser, but it can be set freely).

CSS Layout model