1.文本超出部分显示为...

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

2.文本超出多行结尾部分展示为...

height:46px;//它的值为行高乘以显示的行数line-height:23px;overflow:hidden;text-overflow:ellipsis;white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;//显示的行数-webkit-box-orient:vertical;

3.透明度

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

4.去掉input在IOS系统上默认样式

input{-webkit-appearance:none;appearance:none;}input:-webkit-autofill{-webkit-box-shadow:0001000px#f0f0f0inset!important;}

5.圆角

-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;//值为50px时为一个完整的圆//如果设置为4个值，它们对应的方向依次是：左上角、右上角、右下角、左下角（顺时针方向）

6.段落首行文字缩进

text-indent:2em;

7.背景图片自适应

background-size:cover;

8.选择器

div:first-child{}//选择首元素div:nth-child(x){}//选择第x个元素div:last-child{}//选择尾元素

9.换行

word-wrap:break-word;//让换行点换行word-break:break-all;//所有的都换行（英文也可以）强制不换行white-space:nowrap;自动换行word-wrap:break-word;word-break:normal;强制英文单词断行word-break:break-all;

10.使文字在垂直水平方向都居中

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.两端对齐

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

12.去掉Webkit(chrome)浏览器中input和textarea的×××焦点框

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

13. ie6: position:fixed

.fixed-top{position:fixed;bottom:auto;top:0;}/*positionfixedTop*/*html.fixed-top{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}/*IE6positionfixedTop*/*html{background-p_w_picpath:url(about:blank);background-p_w_upload:fixed;}

14. clearfix清除浮动

终极版一：.clearfix:after{content:"\200B";display:block;height:0;clear:both;}.clearfix{*zoom:1;}/*IE/7/6*/终极版二：.clearfix:before,.clearfix:after{content:"";display:table;}.clearfix:after{clear:both;}.clearfix{*zoom:1;/*IE/7/6*/}.clearfix:before,.clearfix:after{display:table;content:"",line-height:0;}.clearfix:after{clear:both;}

15. seperate-table

.tab{border-collapse:separate;border:1pxsolid#e0e0e0;}.tabth,.tabtd{padding:3px;font-size:12px;background:#f5f9fb;border:1pxsolid;border-color:#fff#deedf6#deedf6#fff;}.tabth{background:#edf4f0;}.tabtr.eventd{background:#fff;}

<tableclass="tab"width="100%"cellpadding="0"cellspacing="0"border="0"><tr><th>111</th><td>222</td></tr><tr><th>111</th><td>222</td></tr></table>

16. min-height: 最小高度兼容代码

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

17. 鼠标不允许点击：

cursor:not-allowed;

18. mac font: osx平台字体优化

font-family:"HiraginoSansGB","HiraginoSansGBW3",'微软雅黑';

19.webkit 水平居中：

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

20.取消a链接的×××边框：

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

21.ie8下图片带边框的问题

img{outline:none;border:none;}

22.水平垂直居中

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