One, block element
Block-level element code!
#d1, #d2 {height:100px;width:100px;border:solid 2px #FF0000;d isplay:inline;
}
< Div = "D1" ></ Div > < Div = "D2" ></ Div >
Block element Features:
1, displayed by default in the upper-left corner of the parent tag (body)
2, block-level elements occupy the full line by default (full document flow)
Common block-level elements:
P label H1~~h6 ul li oi li hr table
Elements in two rows
Common in-line elements
A span img input
Inline element Code!
#sp1, #sp2 { height:100px; width:100px; Border:solid 2px #FF0000;
Display:block;
}
< span = "SP1" > Hello </span>
<span= "SP2" > Hello 2</span>
Inline element Features:
1, size affected by text area unaffected by Heigh width
2, does not occupy one line
span is only for single text
3 inline element block level elements
Display:block
Row variable block
Display:inline
Block becomes line
Display:inline-block;
Characteristics of existing block-level elements with inline elements
(Height-width recovery to impact
Don't stand alone one line
)
float: float up or down
#d1, #d2 {height:100px;width:100px;border:solid 2px #FF0000;
float:left<!--left float--
<!--float:right Right float--
<!--Float:top floating on
<!--Float:bottom Floating
}
#d3
{
Height:100px;width:100px;border:solid 2px #FF0000;
}
<= "D1"> hehe </div>< = "D2" > haha </div>
<div = "D3" > Haha </div>
D3 height width has no effect because it is affected by the above float to use clear:both; clear both sides floating
Three, Box model
Inner pitch padding
< Div = "D1" > Hello <Div>
#d1 {height:100px; width:100px; border:solid 2px #FF0000;
padding:10px;
}
paddding:10px
paddding:10px 20px
padding:10px0 20px 30px up or down
padding:10px 20px 30px 40px upper right lower left
Outside pitch margin
< Div = "D1" > tomorrow </div>
<div= "D2" > Nurture </div>
#d1, #d2 {height:100px; width:100px; border:solid 2px #FF0000;
}
#d2
{
margin-top:10px;
}
Can I use padding margin for inline elements?
< span = "D1" ></ span >
#d1 {Border:solid 2px #FF0000;
padding:10px;}
Inline elements have an effect on padding
#d1 {Border:solid 2px #FF0000;
Margin:left;}
< span = "D1" ></ span >
Margin is only about the element in the row
*{
padding:0px;
margin:0px;
}
All internal and external spacing is equal to 0
Four, relative positioning and absolute positioning
Absolute positioning:
1, out-of-document flow is not covered with a single row unaffected by floats
2, when the position of the absolute positioning element is set, it will be affected by the left right top bottom
Relative positioning: position:relative;
1 setting relative positioning is not out of document flow
2 sets the relative orientation relative to the element's parent tag.
(because the label is not out of the flow of the document, he occupies the position around it)
Fixed element position:fixed
9.22 Classroom Records