The third day of HTML learning--12th Chapter--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:
1. Flow model
2. Floating model (float)
3. Layers Model (layer)

Flow model (i)

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

<! DOCTYPE Html>"Content-type"Content="text/html; Charset=utf-8"><title> block elements in flow mode </title><style type="Text/css">#box1 {width:300px; height:100px;} div,h1,p{border:1px solid red;}</style>"Box2">box2</div><!--block elements, width is displayed by default as 100%--> "Box1">box1</div><!--block elements, because the width:300px is set, the width is displayed as 300px--></body>Flow Model (ii)
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)
Inline element labels A, span, em, strong are inline elements in the right-hand code editor.
<! DOCTYPE html>"content-type" content= " text/html; Charset=utf-8 "inline elements in ><title> flow mode </title><style type="text/css">< /style>"http://www.imooc.com"> Www.imooc.com</a><span> Highlights </span><em> Highlights </em>    <strong> Highlights </strong> </body>
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;}
<! DOCTYPE Html>"Content-type"Content="text/html; Charset=utf-8"><title> Floating Model </title><style type="Text/css">div{border:2px Red Solid;    width:200px;    height:400px; float: Left;}</style>"Div1"> Column 1</div><div id="Div2"> Column 2</div></body>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 for an element in the layer model, you need to set Position:absolute(for absolute positioning), which will drag elements out of the document stream and use left, right, top, The bottom property is absolutely positioned relative to its 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>
The effect is as follows:
<! DOCTYPE html>"content-type" content= " text/html; Charset=utf-8 "><title>absolute style </title><style type="text/css">  div{    width:200px;    height:200px;    BORDER:2PX Red Solid;    Position:absolute;    right:100px;    top:20px;        } </style>"div1"></div></ Body>
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 is left motionless.
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 19-line div tag in the right-hand code editor, and writing some text in the span tag. The following code:
<body>    <div id= "Div1" ></div><span> the position before the offset is still intact, 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.
<! DOCTYPE html>"content-type" content= " text/html; Charset=utf-8 "><title>relative style </title><style type="text/css">  #div1 {    width:200px;    height:200px;    BORDER:2PX Red Solid;    position:relative;    left:100px;    top:50px;        } </style>"div1"></div> </body>
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>
<! DOCTYPE Html>"Content-type"Content="text/html; Charset=utf-8"><title>relative style </title><style type="Text/css">#div1 {width:200px;    height:200px;    BORDER:2PX Red Solid; Position:fixed; bottom:0; Right:0; }</style>"Div1"></div> <p> Text text texts text text texts text text text text text text text text text text text text text text text text The text text texts text textual text text text literal text literal text. </p> <p> Text text texts text text texts text text text text text text text text text text text text text text text text The text text texts text textual text text text literal text literal text. </p> <p> Text text texts text text texts text text text text text text text text text text text text text text text text The text text texts text textual text text text literal text literal text. </p> <p> Text text texts text text texts text text text text text text text text text text text text text text text text The text text texts text textual text text text literal text literal text. </p> <p> Text text texts text text texts text text text text text text text text text text text text text text text text The text text texts text textual text text text literal text literal text. </p> <p> Text text texts text text texts text text text text text text text text text text text text text text text text The text text texts text textual text text text literal text literal text. </p> <p> Text text texts text text texts text text text text text text text text text text text text text text text text The text text texts text textual text text text literal text literal text. </p> <p> Text text texts text text texts text text text text text text text text text text text text text text text text The text text texts text textual text text text literal text literal text. </p> <p> Text text texts text text texts text text text text text text text text text text text text text text text text The text text texts text textual text text text literal text literal text. </p> <p> Text text texts text text texts text text text text text text text text text text text text text text text text The text text texts text textual text text text literal text literal text. </p> <p> Text Textual text text textual text text textual textual text textual text the text text textual text literal text text textual text the text textThis article is the text of the text in textual textual text text literal text text text. </p> <p> Text text texts text text texts text text text text text text text text text text text text text text text text The text text texts text textual text text text literal text literal text. </p> <p> Text text texts text text texts text text text text text text text text text text text text text text text text The text text texts text textual text text text literal text literal text. </p> <p> Text text texts text text texts text text text text text text text text text text text text text text text text The text text texts text textual text text text literal text literal text. </p></body>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;    position:relative;        }
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).
<! DOCTYPE Html>"Content-type"Content="text/html; Charset=utf-8"><title> relative reference elements for positioning </title><style type="Text/css">div{border:2px red Solid;}    #box1 {width:200px;    height:200px;          position:relative;    } #box2 {Position:absolute;    top:20px;          left:30px; }/*Here is the task section*/#box3 {width:200px;           height:200px; } #box4 {width: About%; }</style>"Box1"> <div id="Box2"> Relative reference elements for positioning </div></div>"Box3"> "http://img.mukewang.com/541a7d8a00018cf102000200.jpg"> <div id="box4"> I was a shy little girl when I was a third grade student. </div></div></body>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;    position:relative;        }
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).
<! DOCTYPE Html>"Content-type"Content="text/html; Charset=utf-8"><title> relative reference elements for positioning </title><style type="Text/css">div{border:2px red Solid;}    #box1 {width:200px;    height:200px;          position:relative;    } #box2 {Position:absolute;    top:20px;          left:30px; }/*Here is the task section*/#box3 {width:200px;    height:200px;         position:relative; } #box4 {width: About%;        Position:absolute; Bottom:0; Left:0;/*This CSS style can be omitted*/             }</style>"Box1"> <div id="Box2"> Relative reference elements for positioning </div></div>"Box3"> "http://img.mukewang.com/541a7d8a00018cf102000200.jpg"> <div id="box4"> I was a shy little girl when I was a third grade student. </div></div></body>Box Model Code Shorthand
Remember that margins (margin), padding (padding), and border (border) settings are set in a clockwise direction, up or down in four directions, in the box model: upper right bottom left. Examples of specific applications in margin and padding are as follows:
margin:10px 15px 12px 14px;/* set to 10px, right set to 15px, lower set to 12px, left set to 14px*/
There are three abbreviations that are commonly used:
1. If the values of top, right, bottom, and left are the same, such as the following code:
margin:10px 10px 10px 10px;
can be abbreviated as:
margin:10px;
2. If the top and bottom values are the same, left and right values are the same, as in the following code:
margin:10px 20px 10px 20px;
can be abbreviated as:
margin:10px 20px;
3. If the values of left and right are the same, such as the following code:
margin:10px 20px 30px 20px;
can be abbreviated as:
margin:10px 20px 30px;
Note: The abbreviated method of padding and border is consistent with margin.
<! DOCTYPE html>"content-type" content= " text/html; Charset=utf-8 "><title>relative style </title><style type="text/css">  p{   padding:13px;    </style>
The third day of HTML learning--12th Chapter--CSS Layout model