CSS3常用知识

标签：css常用

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常用知识

标签：css常用

原文地址：http://9886022.blog.51cto.com/9876022/1900967