CSS3 Common knowledge

1. Text out of the section shown as ...

White-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;overflow:hidden;

2. Text beyond the end of multiple lines is shown as ...

height:46px; Its value is the row height multiplied by the number of rows displayed Line-height:23px;overflow:hidden;text-overflow:ellipsis;white-space:normal;overflow:hidden;        Display:-webkit-box;-webkit-line-clamp:2; The number of rows displayed is-webkit-box-orient:vertical;

3. Transparency

Filter:alpha (OPACITY=50);  -moz-opacity:0.5;      -khtml-opacity:0.5; opacity:0.5;

4. Remove the default style of input on the iOS system

input{-webkit-appearance:none; Appearance:none;} input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #f0f0f0 inset!important;}

5. Rounded Corners

-webkit-border-radius:4px;        -moz-border-radius:4px; A border-radius:4px;//value of 50px is a full circle//If set to 4 values, they correspond in the following directions: Upper left corner, upper right corner, lower right corner, lower left corner (clockwise direction)

6. Indent text in the first line of the paragraph

Text-indent:2em;

7. Background Image Adaptive

Background-size:cover;

8. Selector

div:first-child{}//Select first element div:nth-child (x) {}//select X element div:last-child{}//Select tail element

9. Line break

word-wrap:break-word;//let the line break word-break:break-all;//all the lines (English can) force not to break the line white-space:nowrap;    Automatic line wrapping word-wrap:break-word;word-break:normal; Force English words to break word-break:break-all;

10. Center text vertically in horizontal direction

Display:-moz-box;display:-webkit-box;display:box;-moz-box-orient:horizontal;-webkit-box-orient:horizontal; Box-orient:horizontal;-moz-box-pack:center;-moz-box-align:center;-webkit-box-pack:center;-webkit-box-align: Center;box-pack:center;box-align:center;

11. Justify on both sides

Text-align:justify;text-justify:inter-ideogra;

12. Remove the yellow focus frame from the WebKit (Chrome) browser in input and textarea

input,button,select,textarea{Outline:none;} textarea{font-size:13px; resize:none;}

Ie6:position:fixed.

. fixed-top{position:fixed;bottom:auto;top:0;}/* Position fixed top */* HTML. fixed-top{position:absolute;    Bottom:auto; Top:expression (eval (Document.documentElement.scrollTop));}    /* IE6 position fixed Top */*html{background-image:url (About:blank); background-attachment:fixed;}

Clearfix Clear Float

Ultimate Edition One:. Clearfix:after {content: "\200b";    Display:block;    height:0; Clear:both; }. clearfix {*zoom:1;}   /*ie/7/6*/Ultimate Edition II:. clearfix:before,.clearfix:after{content: ""; display:table; }. Clearfix:after{clear:both;}. clearfix{*zoom:1;/*ie/7/6*/}. Clearfix:before,.clearfix:after{display:table;conte NT: "", line-height:0;}. Clearfix:after{clear:both;}

Seperate-table.

. tab{Border-collapse:separate; border:1px solid #e0e0e0;}.    tab Th,.tab td{padding:3px;    font-size:12px;    Background: #f5f9fb;    BORDER:1PX solid; Border-color: #fff #deedf6 #deedf6 #fff;}. tab th{background: #edf4f0;}. tab Tr.even td{background: #fff;}

<table class= "tab" width= "100%" cellpadding= "0" cellspacing= "0" border= "0" > <tr> <th>111</t h> <td>222</td> </tr> <tr> <th>111</th> <td>222</t D> </tr></table>

Min-height: Minimum Height-compatible code

. minheight500{min-height:500px;    Height:auto!important;    height:500px; overflow:visible;}

17. Mouse is not allowed to click:

cursor:not-allowed;

Mac Font:osx Platform Font optimization

font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", ' Microsoft Jas Black ';

19.webkit Horizontal Center:

Display:-webkit-box;    -webkit-box-pack:center; -webkit-box-align:center;

20. Cancel the yellow border of a link:

A{-webkit-tap-highlight-color:rgba (0,0,0,0);}

The problem with the border of the 21.IE8 piece

Img{outline:none;border:none;}

22. Horizontal Vertical Center

. info{margin:0 Auto;position:relative;top:50%;-webkit-transform:translatey ( -50%);-moz-transform:translatey (-50 %);-ms-transform:translatey ( -50%);-o-transform:translatey ( -50%); Transform:translatey (-50%);}

CSS3 Common knowledge