前端开发常用css整理

css属性很多加上css3新增的就更多了，开发过程中难免有遗漏掉的，有时候又不想翻看繁琐的api文档，所以就把常用的css样式整理记录下来，以便翻阅！

1、单行文字垂直居中

<div class="row">
    单行文字垂直居中，单行文字垂直居中，单行文字垂直居中
</div>

.row {
    display: block;
    height: 100px;
    line-height: 100px;
    width: 600px;
    background-color: #d5effc;
}

2、多行文字垂直居中

<div class="wrap">
    <div id="content">
        多行文字垂直居中，多行文字垂直居中，多行文字垂直居中，多行文字垂直居中，多行文字垂直居中，多行文字垂直居中，多行文字垂直居中，多行文字垂直居中，多行文字垂直居中</div>
</div>

.wrap {
    display: table;
    width: 600px;
    height: 150px;
    background-color: #f780a4;
}
                
#content {
    display: table-cell;
    vertical-align: middle;/**垂直居中**/
}

3、单行文本溢出

<div class='text-overflow'> 
    单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出 
</div>

 .text-overflow {
    width: 200px;/**设置显示的长度**/
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-overflow: ellipsis;
    /* IE/Safari */
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    /* Opera */
    -moz-binding: url("ellipsis.xml#ellipsis");
    /*FireFox*/
    background-color: #f4cd89;
}

4、文本内容自动换行

.word-break{
    word-wrap: break-word; 
    word-break: normal; 
}

5、多行文本溢出

<div class='more-text-overflow'>
    webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出
</div>  

.more-text-overflow {
    width: 600px;
    display: -webkit-box;
    -webkit-line-clamp: 3;/*显示的行数,多余的行数将被隐藏*/
    -webkit-box-orient: vertical;
    overflow: hidden;
    background-color: #dcf791;
}

6、table表格细边框设置

 table,table th,table td{
    border:1px solid #999;
    border-collapse: collapse;
}

7、hr细边框

hr{
    height: 1px; background:#ccc; border:0;
}

8、移动设备禁止长按链接与图片弹出菜单

a, img {
  -webkit-touch-callout: none; 
}

9、div中的滚动效果在ios中不流畅解决方法

div{
    -webkit-overflow-scrolling: touch;
}

或者使用iscroll.js

10、清除手机点击页面标签时候出现高亮

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

11、改变用户选中的内容的样式

::selection{
    color:red;//选中内容变为红色
    background-color:gray;//选中内容背景变为灰色
}

::-moz-selection{
    color:red;//选中内容变为红色
    background-color:gray;//选中内容背景变为灰色
}

12、禁止用户选中文本内容

.content {
    -webkit-user-select:none;
    -moz-user-select:none;
    -o-user-select:none;
    user-select:none;
}

本文如有误，请不吝赐教，谢谢！

前端开发过程中如果遇到其它的css样式还会整理到本文，如果你有一些常用css样式在本文未涉及到，可以在评论处留言分享给大家！