BACKGROUND 1.css class style
background-color background color of the
background-image background image
background-repeat repeat background image
repeat-y in the y-axis only repeat
repeat-x in the x-axis only repeat
no-repeat will not be repeated, only appears once
positioning background-position background image
values: two, respectively, represent the x and y directions. If you write only one, then two values are equal
background is all put together all of the above together
background: color image repeat position
size background-size background images
Example: Top Good
<div class = "d03_bgimg d03_02" > </ div>
.d03_bgimg{
background-image: url(../images/sprite.jpg);
}
.d03_02{
width: 78px;
height: 16px;
background-position: -484px -45px;
}
2. The box model
Any element can be understood as a box
box can be installed "stuff"
inside stuff with "box packing" There is some room for
two or more boxes box between the box is not there a certain "distance" ( space)
consisting of box model of
margin margins distance between the box and the box
border borders box
margins within the filler padding
content content bought the east
margin of the property together wrote four
when you write a time, all four of the same
two, when the right side of the padded
three, when the lower right side of the padded
margin-top margin-right margin- bottom margin-left
four separate attributes may be written out
border closing frame write attribute
border-color color
border-Top-color:;
border-left-color:
border-style pattern
can be divided into left and right vertical
border-width width
can be divided vertically and horizontally
written when necessary to distinguish the order of
padding
on the left and right lower
-edge filled
width and height defined content portion only
padding and border will stretch box
Size of the box content + padding + border
3.css layout
Positioning: top, left, right, bottom element only in the case will be used to increase localization
The relative position of the general not to use top, left, right, bottom
absolutely positioned
elements from the document flow will
generally not to use margin, with the top, left, right, bottom
fixed positioning
of elements from the document flow will
use scenarios: Back to the top of the sidebar the ad
only browser window can live pipe
under normal circumstances: the relative and absolute positioning are simultaneously occurring
in general all of the drop-down box are absolutely combined with the relative positioning completed
The relative position and absolute position to use
to find relative, looking to turn the parent element of the process is to find above, can not be found directly on the activities within the scope of the body. Relative positioning action is generally used pipe absolute positioning
float
Floating divided into two, left and right float float
float will be out of the document flow
difficulty is clear float
clear float: float itself is not clear, but their impact on a floating Clear