Positioning of CSS

One
Normal document Flow: Refers to the way the HTML document behaves from left to right, top to bottom, when the content is being laid out. Most of the elements in HTML are in the normal flow of documents, and the only way an element can be detached from normal flow is by floating or positioning.
Second, the location of the common several forms;
1,CSS has three basic positioning mechanisms: normal flow, floating and absolute positioning;
A, normal flow demo:
<!--normal Flow--
<div style= "border:1px solid #0e0; width:200px ">
<div style= "height:100px; width:100px; Background-color:red "></div>
<div style= "height:100px; width:100px; Background-color:blue "></div>
<div style= "height:100px; width:100px; Background-color:green "></div>
</div>
B, relative positioning Demo:
<!--relative positioning--
<div style= "border:1px solid #0e0; width:200px ">
<div style= "height:100px; width:100px; Background-color:red "></div>
<div style= "height:100px; width:100px; Background-color:blue; position:relative;top:0px; left:100px "></div>
<div style= "height:100px; width:100px; Background-color:green "></div>
</div>
Summary: 1, the above example can be seen, the blue div relative positioning, the right to move, move down 20px after the green div position does not change, but in the original position, the blue div obscured the part of the Green Div.
C, absolute positioning Demo:
<!--absolutely positioned-
<div style= "border:1px solid #0e0; width:200px "> (* * Summary 2 Explanation * * Plus: position:relative)
<div style= "height:100px; width:100px; Background-color:red "></div>
<div style= "height:100px; width:100px; Background-color:blue; position:absolute;top:0px; left:100px "></div>
<div style= "height:100px; width:100px; Background-color:green "></div>
</div>
Summarize:
1, the relative positioning can be regarded as a special ordinary flow location, the element position is relative to his position in the normal flow changes, and the absolute positioning of the element position is independent of the document flow, also does not occupy the document flow space.

2, the position of an absolutely positioned element is determined relative to the position of his nearest non-static ancestor element. If the element does not have an ancestor element that has been positioned, then his position is relative to the element that initially contains the block (body or HTML god horse).
d, fixed positioning demo:
<div style= "Border:solid 1px #0e0; width:200px; " >
<div style= "height:100px; width:100px; background-color:red; " >
</div>
<div style= "height:100px; width:100px; Background-color:blue; position:fixed; bottom:50px; left:50px; " >
</div>
<div style= "height:100px; width:100px; Background-color:green; " >
</div>
</div>
E, floating positioning Demo:
1, Basic knowledge:
The floating model is also a visual format model, and the floating box can move left and right (depending on the value of the float property) until its outer edge touches the edge of the box that contains the box or another floating element. The floating element is not in the normal flow of the document, and the elements in the normal flow of the document behave as if the floating element does not exist.
1,) do not float:
<!--floating and not floating--
<div style= "Border:solid 5px #0e0; width:300px; " >
<div style= "height:100px; width:100px; background-color:red; " >
</div>
<div style= "height:100px; width:100px; Background-color:green; ">
</div>
<div style= "height:100px; width:100px; Background-color:yellow; " >
</div>
</div>
<!--right Float--
<div style= "Border:solid 5px #0e0; width:300px; " >
<div style= "height:100px; width:100px; background-color:red; Float:right; " >
</div>
<div style= "height:100px; width:100px; Background-color:green; ">
</div>
<div style= "height:100px; width:100px; Background-color:yellow; " >
</div>
</div>
<!--left float--
<div style= "Border:solid 5px #0e0; width:300px; " >
<div style= "height:100px; width:100px; background-color:red; Float:left; " >
</div>
<div style= "height:100px; width:100px; Background-color:green; " >
</div>
<div style= "height:100px; width:100px; Background-color:yellow; " >
</div>
</div>
<!--overall left float--
<div style= "Border:solid 5px #0e0; width:300px; " >
<div style= "height:100px; width:100px; background-color:red; Float:left; " >
</div>
<div style= "height:100px; width:100px; Background-color:green; Float:left; " >
</div>
<div style= "height:100px; width:100px; Background-color:yellow; Float:left; " >
</div>
</div>
<br><br><br><br><br><br>
<!--width is not enough--
<div style= "Border:solid 5px #0e0; width:250px; " >
<div style= "height:100px; width:100px; background-color:red; Float:left; " >
</div>
<div style= "height:100px; width:100px; Background-color:green; Float:left; " >
</div>
<div style= "height:100px; width:100px; Background-color:yellow; Float:left; " >
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br> <br>
<!--is not high enough--
<div style= "Border:solid 5px #0e0; width:250px; " >
<div style= "height:120px; width:100px; background-color:red; Float:left; " >
</div>
<div style= "height:100px; width:100px; Background-color:green; Float:left; " >
</div>
<div style= "height:100px; width:100px; Background-color:yellow; Float:left; " >
</div>
</div>
F. Line box Cleanup Demo:
1. Understanding: The preceding point indicates that the float will leave the element out of the document flow, without affecting the non-floating element. Not really, if a floating element has a document flow element behind it, then the element's box will behave as if the floating element does not exist, but the text content of the box will be affected by the floating element. Move to make room. In terms of the term, the line box next to the floating element is shortened so that the floating element flows out of space, so the row box surrounds the float box.
2. Code:
<!--line box and clean-up
<div style= "Border:solid 5px #0e0; width:250px; " >
<div style= "height:50px; width:50px; background-color:red; " ></div>
<div style= "height:100px; width:100px; Background-color:green; " >
11111111111
11111111111
</div>
</div>
<div style= "Border:solid 5px #0e0; width:250px; " >
<div style= "height:50px; width:50px; background-color:red; Float:left; " ></div>
<div style= "height:100px; width:100px; Background-color:green; " >
11111111111
11111111111
</div>
</div>
Three, Display:inline-block;
1. Since the div is a block-level element, the boxes are arranged in portrait form. In practice, it is often necessary to arrange the boxes horizontally. So you can use: Display:inlin-block;
2. Code:
1):
<div class= "BOXBG" >
<div class= "Box1" >
Box 1
</div>
<div class= "Box2" >
Box 2
</div>
<div class= "Box3" >
Box 3
</div>
</div>
2):
<style type= "Text/css" >
. boxbg{
margin:0 Auto;
width:500px;
height:200px;
BORDER:2PX Solid #ccc
}
. box1{
width:100px;
height:50px;
background-color:red;
Display:inline-block
}
. box2{
width:100px;
height:50px;
Background-color:blue;
Display:inline-block
}
. box3{
width:100px;
height:50px;
Background-color:green;
Display:inline-block
}
</style>

3. Summary:
1. As for the middle gap, traced back to the essential reason is caused by the whitespace between the elements, so in the parent element set the size of the fone-size, you can adjust the size of the blank gap.
2. Code:
. boxbg{
margin:0 Auto;
width:500px;
height:200px;
border:2px solid #ccc;
font-size:34px; (the size of the text affects the gap, for 0 there is no gap, want to have text, set in the child element)
}

Positioning of CSS