CSS3常用知识
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%);}
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。