Understanding Css+div Positioning

one, div tag and span tag
Div and span can be used as a container, collectively controlling the style within the container
The difference is that Div makes block-level elements, and there are line breaks before and after
span is an inline element and does not wrap around it.

second, box model
1, Concept
Any page element can be viewed as a box
A box model consists of content, padding, border, margin four parts

Third, the positioning of elements

1,float
The value can be left, right, or default None,left and yes on either side of the parent element.
You can set Clear:left, right, and both to clear the effect of float on it

2,position
Static: Default value, keep in position
Absolute: Absolute position, top, bottom, right and left can specify absolute or percentage, and the elements that are added to the page after the CSS default overwrite the original
Relative: Position relative to parent block, top, bottom, right, left
Fixed: Essentially the same as absolute, but the block does not move up and down with the browser scroll bar, IE does not support the fixed property

3,z-index
Z-index refers to the vertical and page direction of the z-axis, the Z-index value of the block on the small value of the block, will form a cover effect DTH (height) value refers to the content of the width (height) +padding The value of the IV can have span, And there's no div in span.

one, div tag and span tag
Div and span can be used as a container, collectively controlling the style within the container
The difference is that Div makes block-level elements, and there are line breaks before and after
span is an inline element and does not wrap around it.
There can be a span within a div, and no div within a span

second, box model
1, Concept
Any page element can be viewed as a box
A box model consists of content, padding, border, margin four parts
The value of width (height) refers to the value of the content's width (height) +padding

2,border
Color
Width:thin, medium, thick, value
Style:none, hidden, dotted, dashed, solid, double, groove, Ridge, inset, outset
Border-top, Border-bottom, Border-left, Border-right
IE does not support Border-style

Background-color in IE middle finger content+padding,ff middle finger content+padding+border

3,padding
Padding-top, Padding-bottom, Padding-left, Padding-right

4,margin
Margin-top, Margin-bottom, Margin-left, Margin-right
For a row, the margin of two blocks = Margin-right + margin-left
For a line, the margin of two blocks = the larger of Margin-bottom and Margin-top
For a parent, the margin of the child block = The margin of the child block + the padding of the parent block
When margin is set to a negative number, the block moves in the opposite direction, even covering the other block

third, the positioning of elements
1,float
The value can be left, right, or default None,left and yes on either side of the parent element.
You can set Clear:left, right, and both to clear the effect of float on it

2,position
Static: Default value, keep in position
Absolute: Absolute position, top, bottom, right and left can specify absolute or percentage, and the elements that are added to the page after the CSS default overwrite the original
Relative: Position relative to parent block, top, bottom, right, left
Fixed: Essentially the same as absolute, but the block does not move up and down with the browser scroll bar, IE does not support the fixed property

3,z-index
Z-index refers to the vertical and page orientation of the z-axis, the large z-index value of the block on the small value of the blocks above, will form a cover effect

iv. signature of pictures

Java code

2. <div id= "Block1" > "Building.jpg" border= "0" ></div>
4. <div id="Block2">xxx ' s photo</div>
8. #block1 {
10. padding:10px;
12. border:1px solid #0000;
14. float  : Left;
16. }
20. #block2 {
22. Color:white;
24. padding:10px;
26. Position:absolute;
28. Left 255px;
30. top:205px;
32. }

<div id= "Block1" ></div><div id= "Block2" >xxx ' s photo</ Div> #block1 {  padding:10px;  border:1px solid #0000;  Float:left;} #block2 {  color:white;  padding:10px;  Position:absolute;  Left 255px;  top:205px;}

Five, the text shadow

Java code

2. <div id= "Block1" >css positioning Shadows </div>
4. <div id="Block2">css positioning Shadows </div>
8. #block1 {
10. position:relative;
12. Z-index: 1;
14. }
18. #block2 {
20. Color: #AAAAAA;
22. position:relative;
24. Top:-1. 06em;
26. Left: 0. 1em;
28. Z-index: 0;
30. }

Understanding Css+div Positioning