CSS Layout model

This paper is based on the learning notes in Mu-net .

after clear the basic concept of CSS box model, box model type, you 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:
1. Flow model
2. Floating model (float)
3. Layers Model (layer)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.

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.

Set two elements to the left floating, to achieve a line display. div{    width:200px;    height:200px;    BORDER:2PX Red Solid;    Float:left;} <div id= "Div1" ></div><div id= "Div2" ></div>//set two elements to the right float, the implementation of a line display. div{    width:200px;    height:200px;    BORDER:2PX Red Solid;    Float:right;} Set two elements one left and right, implement a line display div{    width:200px;    height:200px;    BORDER:2PX red Solid;} #div1 {float:left;} #div2 {float:right;}

Layer Model

The layer layout model is like a very popular layer editing feature in Photoshop, where each layer can be positioned precisely.

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)

1. 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 with a positional property (which can be absolute, relative, or fixed) (This is important, you can deliberately set a relative, otherwise absolute directly relative to the BODY element) contains the block for absolute positioning. If no such inclusion block exists, then relative to the body element, that is, relative to the browser window .

Implement a DIV element to move 100px to the right 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>

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 in static (float) mode, and then moving relative to the previous position, the direction and amplitude of the move is determined by the left, right, top, and bottom properties. The position before the offset remains motionless (the original position is left, and no one else can).

The following code implements moving 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><span> position before offset is still not covered before the previous Div has no offset before the position </span>

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

PS: Remember, when the data in that table is too long to use the ellipsis to denote the extra part, the table must be set to position:fixed, otherwise the ellipsis will not work, and the table will be automatically scaled.

The implementation moves 100px to the right relative to the browser view, moving 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;}

CSS Layout model