A detailed example of CSS advanced layout model

CSS contains three layout models flow model floating model float Layer model layer

Flow model

The default layout model of a Web page features two

1. Block elements are spread vertically from top to bottom within 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.

<style type= "Text/css" >    h1,p,div{        border:1px solid red;    } </style>

2. In the flow model, the inline elements are displayed horizontally from left to right within the containing element in which they are located.

<a href= "Http://>www.baidu.com</a><span>hello</span><em>shit</em><strong >world</strong>

www.baidu.com Hello shit world is displayed horizontally in the same row.

2. Float Model Float

Any element is not floating by default, but can be defined as floating with CSS, such as Div, p, table, IMG, and so on can be defined as floating for example, let the following two div elements appear side by side on the same line

div{    border:1px solid red;    width:200px;    height:200px;    float:left;//from left to right}<div>hello</div><div>world</div>

3. Layers Model Layer

Enables precise positioning of HTML elements (not very much, but partial use of layer models to achieve some effects)

There are three types of layer models:

Absolute positioning: Position:absolute

Drag the element out of the document stream, and then use the left, right, top, and bottom properties to absolutely locate the parent containing block that has the closest location property relative to it. If no such inclusion block exists, then relative to the body element, that is, relative to the browser window.

Move the DIV element to the right in relation to the browser window 100px down 200px

div{    Position:absolute;    width:100px;    height:100px;    border:1px solid red;    left:100px;    top:200px;}

Relative set to: position:relative

Moving in relation to the previous position, the direction and amplitude of the move are determined by the left, right, top, bottom properties, where the position before the offset remains motionless (EH1 is displayed in particular).

   . div1{    position:relative;    width:200px;    height:200px;    border:1px solid red;    left:200px;    top:200px;} <span>hello world><div class= "Div1" >position:relative</div><span>eh1<span>

Fixed positioning: position:fixed

The relative movement of coordinates is 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 will always be somewhere in the view in the browser window

#div2 {    position:fixed;    bottom:100px;    right:100px;    width:200px;    height:200px;    border:1px solid Red;} <div id= "Div2" >position:fixed</div>

This way, the div is always in the lower-right corner of the window, regardless of how much content is in the browser.

Combined use of Position:absolute and position:relative

It is known from above that Position:absolute is positioned relative to the browser, and can be position:absolute relative to other elements by position:relative but must meet the following points:

1. The referenced element must be the parent element of the anchor element

2. Set the referenced element to position:relative

3. Set the positioning element to Position:absolute

#div1 {border:1px solid red; width:200px; height:200px; position:relative;} #div2 {border:1px solid red; width:50px; height:50px; left:20px; top:20px; position:absolute;} <div id= "Div1" >    <div id= "Div2" >hello</div></div>

This enables the DIV2 to be positioned relative to the div1.