CSS Small Summary

1. Float closure
1) Add a new div child element Clear:both
2) parent element style overflow:auto;zoom:1;
3) after pseudo-class add element

Div:after {   display:block;    Clear:both;    content:".";    Visibility:hidden;    height:0;}

2. IE does not recognize min-, parent element style settings

height:auto!important;height:150px;min-height:150px;

3. float div in IE margin double and other issues

#box {float:left; width:100px; margin:0 0 0 100px; display:inline;}

4. The UL tag has list-style and padding under FF, so it is best to set the common style for compatibility.

ul {margin:0px; padding:0px; List-style:none;}

5. About Hand type cursors:

IE under Cursor:pointer, while IE is hand

6. Problems in the play in CSS layout

{text-align: center;}  { margin-right: auto; margin-left: auto;}

7. CSS Tips

1) CSS Shorthand

Font:bold Italic small-caps 1em/1.5em verdana,sans-serif;background: #00FF00 url (bgimage.gif) no-repeat fixed top; border:5px solid red;

2) Photo Replacement tips

{background: url (/blog/widget-image.gif) no-repeat; height: 100px; text-indent: -2000px;}

8. CSS3 transition Animation, etc.

CSS3 border [-O-,-webkit-,-Moz-]border-radius, Box-shadow, BORDER-IMAGECSS3 background background-size, Background-origin

9. Use "..." for extra text

. Ellipsis {width: 100px; overflow:hidden; text-overflow:ellipsis; white-space: nowrap;}

10. Advantages and disadvantages of pseudo-class:

The advantage is that you can add special effects to some selectors. Pseudo classes are not recognized on IE. The fundamental difference between pseudo-classes and elements is that they create new elements. If you need to add a new element to identify it as an element, and vice versa, you only need to add a class to the existing element. If you do not use pseudo-elements, you need to add additional elements, and if you do not use pseudo-classes, you only need to add a class

Used to add special effects to some browsers.
Pseudo-classes can be used to represent the dynamic state of some elements, such as the individual states of a link, and to represent elements that are logically present but do not need to be flagged in the document tree, such as the first paragraph P:first-child
Pseudo-elements represent the child elements of an element that, while logically present, do not actually exist in the document, such as the first line of a paragraph p:first-line

Pseudo-Class:

Pseudo elements:

CSS Small Summary