CSS Layout model

CSS Layout Model

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:
1. Flow model
2. Floating model (float)
3. Layers Model (layer)

Flow Model

First of all, the 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.

The flow layout model has 2 more typical features:

1th, the block element extends vertically from top to bottom in the containing element , because, by default, the width of the block element is 100%. In fact, a block element occupies a position in the form of a row. As in the right-hand code editor, the three-block scholar-label (div,h1,p) width is displayed as 100%.

2nd, in the flow model, the inline elements are displayed horizontally from left to right within the containing element in which they are located. (inline elements are not like blocky elements so overbearing exclusive line)

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 a floating 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;}

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 position HTML elements precisely in a Web page, 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.

There are three forms of the layer model:

1. Absolute Positioning (Position:absolute)

2. relative positioning (position:relative)

3, fixed positioning (position:fixed)

Layer model--absolute positioning

If you want to set absolute positioning 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 uses the left, right, top, and bottom properties relative to its The closest parent containing block with a positional property is absolutely positioned. 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>

The effect is as follows:

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 in the form of static (and the element floats like a layer) and then moving relative to the previous position, moving in the direction and amplitude of left, right , top, bottom property determines that the position before the offset is left intact.

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>

：

What is the " position before offset "?

You can do an experiment by adding a span tag after the Code Editor DIV tag to mark and write some text in the span tag. The following code:

<body>    <div id= "Div1" ></div><span> offset before the position remains motionless, overwriting the previous Div without the position before the offset </ Span></body>

：

It is obvious from this that, although the DIV element is offset from the previous position, the previous position of the DIV element is retained, so the later span element is displayed behind the DIV element's previous position.

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 feature. 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>

Relative combined with absolute

The small partners learned the absolute positioning of the 12-6 bars: using the position:absolute set element can be implemented relative to the browser (body) set positioning, have you ever wondered if you could be compared to other elements of the positioning? The answer is yes, of course you can. Use Position:relative to help, but you must abide by the following specifications:

1. The reference positioning element must be a predecessor element of the relative positioning element:

<div id= "Box1" ><!--Reference positioned elements--    <div id= "Box2" > Relative reference elements for positioning </div><!--relative positioning elements-->< /div>

It can be seen from the above code that BOX1 is the parent element of Box2 (the parent element is, of course, the predecessor element).

2, the reference positioning elements must be added position:relative;

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

3, positioning elements to join Position:absolute, you can use top, bottom, left, right to offset positioning.

#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