Floating background image setting relative positioning absolute positioning 042
1. Floating
2. Text properties and font properties
text alignment
font-size font size
font-family type of font
font-weight 400~900 font weight
font:24px/1.5 'Italic', 'Microsoft Yahei'
text-align
left left alignment
right right-aligned
center center alignment
Justify aligns both sides only for English
text-indent The first line of indentation is recommended to use em
text-decoration : underline underline
text-decoration : none ; wireless
Center text vertically
Single line of text, line height == box height
Multi-line text padding-top = (height-number of lines * line height)/2, and subtract the height of the box
background:
Color: rgba() Check it out in class
Background image: background -image:url('connect image resource') tiled by default
background-repeat choose whether to repeat the box
repeat repeats horizontally and vertically by default
repeat-x repeat horizontally
repeat-y to repeat vertically
no-repeat the background image is displayed only once
Sprite image (sprite image) technology: background-position: x, y
benefit :
It can well reduce the http requests of web pages and greatly improve the performance of the page is the biggest advantage of css
It can reduce the bytes of the picture. The size of three pictures combined into one picture is always smaller than the sum of the bytes of these three pictures.
Solve the problem of naming pictures
Easy to change styles
insufficient:
The biggest problem is memory usage
Jigsaw puzzle maintenance is more troublesome
makes it difficult to write css
The called picture cannot be printed
banner:
You can use the background comprehensive attribute to make the Babel banner, but the size of the given picture exceeds the size of the computer screen
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .bojie{ width: 40px; height: 74px; background-color: black; background: url("http://i1.mifile.cn/f/i/2014/cn/icon/icon-slides.png") no-repeat -89px 0; } .bojie:hover{ background-position: 0 0; } </style> </head> <body> <div class="bojie"></div> </body> </html>
position:
position :relative|absolute|fixed
relative: does not deviate from the standard flow and does not affect the page layout
Individual settings for an arbitrary (standard and non-standard document flow) box
Floating and positioning are independent of each other
Function: Fine-tune elements as a reference (layout scheme) for parents and children. Relative positioning does not leave the mark. Relative positioning can be used as a cover (be careful not to let it affect the page)
Absolute positioning:
Stripping does not distinguish between inline elements and block-level elements and can set width and height
gland
advantage
Raising the level does not affect the page
Reference point:
1. Set absolute positioning separately. When using the top attribute description, use the upper left corner of the page as the reference point to adjust the position. When using the bottom attribute description, use the lower left corner of the first screen page as the reference point to adjust the position.
2. Parent-child nesting, parent and child are all relative positioning, taking the upper left corner of the nearest parent as the reference point