Web front end "supplemental" CSS Supplement

Some common properties of CSS:

1. Remove the underline: text-decoration:none;
2. Add underline: text-decoration:underline;

3. Adjust the position of the text and the picture (that is, set the vertical alignment of the element): vertical-align:-20px;

Not set before:

After setting:

3. Margins: Margin
4. Inner margin: padding
5. Center; margin 0 auto; (centered on box only)

6 inline tags are not to be set to long-width, and sometimes you have to turn inline tags into block-level labels or block-level inline tags, which uses the display label.
1. Convert the inline tag to block-level tags: display:block;
2. Convert block-level labels to inline tags: display:inline;
3. Block-level inline tag: display;inline-block;
Block-level inline tags can be as wide as block-level, or can be displayed in a row as inline
6. Hidden two methods: Display:none; #隐藏了会顶上去
Visibility:hidden; #隐藏了不会顶上去
7. Two ways to hide overflow: overflow:auto;
Overflow:scoll; #带滚动条
8. Text Horizontal Center: text-align:center;
Text vertically centered: line-height;
9. pseudo-class;
1. Before the visit: a:link{color:red;}
2. Mouse hover: a:hover{color:green;}
3. After the visit: A:visited{color:yellow;}
4. Mouse click A:active{color:blue;}
5. Add content to the C2 after the P tag property
p.c2:after{
Content: ' Hello ';
color:red;
}
6. On the P Tag property, add content to the C2 's money face
p.c2:before{
Content: ' La la la ';
color:red;
}
Four types of 10.position properties
1.static: Default location
2.fixed: Completely out of document flow, fixed positioning (with Visual window as reference)
3.relative: Relative positioning (referring to its own position), without leaving the document flow, without jacking up, will keep its position. You can use top left for positioning
4.absolute: Absolute positioning: Out of the flow of the document (refer to the positioning of the parent label, if it is not found to be found by body)
Attention!! : Set the positioning label to absolute and set his parent label to the anchor label (relative)

The difference between 11.float and position
FLOAT: Semi-detached document flow
Position: Full out of document flow
The 12.z-index property sets the stacking order of elements. Elements that have a higher stacking order are always in front of elements that are lower in stacking order.

Test z-index<! DOCTYPE html>
　　
 13. Transparency: opacity:0.4; 
 14. Border Radian: border-radius:50%; 
 15. Remove the logo in front of the list: List-style:none; 
 16. Align top and left tops: padding:0; margin:0; 
 17. Font bold style: font-weight:900;  
 18. There are several logical expressions to note, the following and JS &&,| | The usage is the same as the 
 print (3 and 5) #两个为真才为真 
 Print (0 and 3) #0是假就不判断后面了, which is directly false 
 print (0 or 3) #有一个为真就为真 
 Print (2 or 3) #2已经为真了那么就不会去判断后面了 
Achieve the effect of picture switching <!    DOCTYPE html>
 
 
Background Management layout <!    DOCTYPE html>
　　
Cover Layer <! DOCTYPE html>
　　
Web front end "supplemental" CSS Supplement