Class for front-end content recorded day03-2
The main content: css style class background, box model, css layout
① on the background css class styles
background-color background color
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 repeat not only show a
positioning background-position background image
values: two , respectively, represent the x and y directions. If only a write, then the two values are equal
, for example: Jingdong, Taobao star Good
Sprite FIG: each set of icons, the purpose is to reduce the http request
background is put together all of all of the above
background: color image repeat position
background-size background image size
② About 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
padding inside padding filler
stuff content content bought the
margin together wrote properties
4
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
defined width and height content portion only
padding and border will stretch box
size of the box content + padding + border
③css layout
Positioning: top, left, right, bottom cases where only the positioning of the elements will be used to increase
the relative positioning of the boss
usually do not go with the top, left, right, bottom
absolute positioning second child
elements from the document flow will
generally not to use margin, with 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 from the document flow will
be used: Top
ad sidebar
Wild Child purebred. Only the 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