1.css background class styles
2. The box model
3.css layout
background-color background color
background-image background image
Background-repeat repeating background images
repeat-y in the y-axis is repeated only
repeat-x in the x-axis only repeated
no-repeat will not be repeated, only appears once
Positioning background-position background image
Value: two, respectively, represent the x and y directions. If you write only one, then two values are equal
For example: Jingdong, Taobao five-star praise
FIG. Sprite: each set of icons, the purpose is to reduce the http request
All the above is the background all together
background : color image repeat position
background-size background image size
Any element can be understood as a box
Box can be installed "stuff"
With things inside the "box packing" There is a certain space
Or two boxes between a plurality of boxes, the box is not a certain "distance" (space)
The composition of the box model
Distances between the outer margin of the box and the box
border borders box
Padding the padding filler
content content bought stuff
margin together to write the property
4
When you write a time, all four of the same; two, when, on the right, on the side filled; three, when, on the lower right side of the padded
margin-top margin-right margin-bottom margin-left
These four attributes can separate out to write
border border co-wrote properties
border-color color
border-top-color: ;
border-left-color:
border-style style
Also points up and down
border-width Width
Also points up and down
The time of writing no need to distinguish order
padding
Above the lower right corner left
On the padded edge
width and height defined only content portion; padding and border will stretch Box
Size of the box content + padding + border
Positioning: top, left, right, bottom element only in the case will be used to increase localization
Relative positioning boss
General not to use top, left, right, bottom
Absolute positioning second child
Elements will flow out of the document
General not to use margin, with the top, left, right, bottom; although can be effective, but in order to facilitate the development of simple code.
Fixed positioning is certainly not the same father
Elements will flow out of the document
Usage scenarios: Back to the top
Sidebar ad
Wild Child purebred. Only the browser window can live pipe
Under normal circumstances: the relative and absolute positioning are simultaneously occurring
All general is absolutely drop-down box combined with the relative positioning completed
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.f1,.f2{
position:relative;
}
.d1,.d2,.d3{
width: 100px;
height: 100px;
border: 1px solid #ccc;
position: absolute;
top: 0;
left: 0;
}
{.d1
background: #f00;
z-index: 5; / * shows a comparison level, level depends father powerful enough * /
}
.d2{
background: #0f0;
z-index: 10;
}
.d3 {
background: #00f;
}
</style>