首页 > 代码库 > CSS3常用知识
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:0 0 0 1000px #f0f0f0 inset !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; } /* 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; }
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: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</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:"Hiragino Sans GB","Hiragino Sans GB W3",‘微软雅黑‘;
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: 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常用知识
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。